DRYing the project

app/static/js/view-modal.js

@@ -57,30 +57,15 @@ document.addEventListener('DOMContentLoaded', () => {
   // ---------------------------
   // Tag editor helpers
   // ---------------------------
+  // Use shared TagUtils module
+  const { getTagIcon, getTagDisplayName, getTagDisplayNameForOverlay, escapeHtml, createTagChipHtml } = window.TagUtils || {};
+
   function setEditorImageId(id) {
     if (tagEditor) tagEditor.dataset.imageId = id || '';
   }
   function getEditorImageId() {
     return tagEditor ? tagEditor.dataset.imageId : '';
   }
-  function getTagIcon(kind) {
-    const icons = {
-      artist: '🎨',
-      archive: '🗜️',
-      character: '👤',
-      series: '📺',
-      fandom: '🎭',
-      rating: '⚠️',
-      source: '🌐',
-      post: '📌'
-    };
-    return icons[kind] || '#';
-  }
-
-  function getTagDisplayName(name) {
-    // Remove prefix if present (e.g., "artist:Name" -> "Name")
-    return name.includes(':') ? name.split(':', 2)[1] : name;
-  }
 
   function renderTags(tags) {
     if (!tagList) return;
@@ -108,13 +93,6 @@ document.addEventListener('DOMContentLoaded', () => {
   // ---------------------------
   // Gallery item tag refresh (fallback if bulk-select.js not loaded)
   // ---------------------------
-  function getTagDisplayNameForOverlay(name, kind) {
-    if (['artist', 'character', 'series', 'fandom', 'rating'].includes(kind)) {
-      return name.includes(':') ? name.split(':', 2)[1] : name;
-    }
-    return '#' + name;
-  }
-
   async function refreshItemTagsFallback(imageId) {
     const item = document.querySelector(`.img-clickable[data-id="${imageId}"]`);
     if (!item) return;
@@ -138,15 +116,7 @@ document.addEventListener('DOMContentLoaded', () => {
         item.appendChild(overlay);
       }
 
-      overlay.innerHTML = visibleTags.map(t => {
-        const displayName = getTagDisplayNameForOverlay(t.name, t.kind);
-        const icon = getTagIcon(t.kind);
-        const encodedName = encodeURIComponent(t.name);
-        const escapedName = t.name.replace(/"/g, '"');
-        const escapedDisplay = displayName.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-        const prefix = icon !== '#' ? icon + ' ' : '#';
-        return `<a class="tag-chip" href="/gallery?tag=${encodedName}" title="Filter by ${escapedName}" onclick="event.stopPropagation()">${prefix}${escapedDisplay}</a>`;
-      }).join('');
+      overlay.innerHTML = visibleTags.map(t => createTagChipHtml(t)).join('');
     } catch (e) {
       console.error('Failed to refresh tags for image', imageId, e);
     }