DRYing the project

app/static/js/showcase.js

@@ -2,6 +2,11 @@
 // JS-managed masonry with column distribution for infinite scroll
 
 (function() {
+  'use strict';
+
+  // Use shared TagUtils module
+  const { formatTagHtml, createTagChipHtml } = window.TagUtils || {};
+
   const container = document.getElementById('showcaseGrid');
   if (!container) return;
 
@@ -156,15 +161,8 @@
     if (visibleTags.length > 0) {
       const overlay = document.createElement('div');
       overlay.className = 'tag-overlay';
-      visibleTags.forEach(t => {
-        const chip = document.createElement('a');
-        chip.className = 'tag-chip';
-        chip.href = `/gallery?tag=${encodeURIComponent(t.name)}`;
-        chip.title = `Filter by ${t.name}`;
-        chip.onclick = (e) => e.stopPropagation();
-        chip.innerHTML = formatTag(t);
-        overlay.appendChild(chip);
-      });
+      // Use shared utility to create tag chips
+      overlay.innerHTML = visibleTags.map(t => createTagChipHtml(t)).join('');
       item.appendChild(overlay);
     }
 
@@ -274,33 +272,6 @@
     }
   }
 
-  function formatTag(tag) {
-    const escape = (s) => {
-      const div = document.createElement('div');
-      div.textContent = s;
-      return div.innerHTML;
-    };
-
-    const icons = {
-      artist: '🎨',
-      archive: '🗜️',
-      character: '👤',
-      series: '📺',
-      fandom: '🎭',
-      rating: '⚠️',
-      source: '🌐',
-      post: '📌'
-    };
-
-    const icon = icons[tag.kind];
-    if (icon) {
-      const label = tag.name.includes(':') ? tag.name.split(':', 2)[1] : tag.name;
-      return `${icon} ${escape(label)}`;
-    } else {
-      return `#${escape(tag.name)}`;
-    }
-  }
-
   // Start
   init();
 })();