Add handleTagClick method and event listeners for tag icons

utils/renderer/FileListManager.js

@@ -97,7 +97,7 @@ class FileListManager {
       <div class="file-fps">${fps}</div>
       <div class="file-tags">
         <span class="tag-icon extra-tag" data-file-path="${file.path}" title="Mark as Extra">🏷️</span>
-        <span class="tag-icon behindTheScenes-tag" data-file-path="${file.path}" title="Add Behind the Scenes">🎥</span>
+        <span class="tag-icon behind-the-scenes-tag" data-file-path="${file.path}" title="Add Behind the Scenes">🎥</span>
         <span class="tag-icon delete-tag" data-file-path="${file.path}" title="Mark for Deletion">🗑️</span>
         <span class="video-preview-btn" data-file-path="${file.path}" title="Preview Video">🎬</span>
         <button class="play-button" style="opacity: 0.3; cursor: default; flex-shrink: 0;" data-file-path="${file.path}" disabled>▶️</button>

utils/renderer/UIManager.js

@@ -65,11 +65,13 @@ class UIManager {
     // Search input with debounce
     this.searchInput.addEventListener('input', this._debounce(() => this.searchShows(), 300));
 
-    // Add click handler for episode number editing (ranges)
+    // Add click handler for episode number editing (ranges) and tags
     document.addEventListener('click', (e) => {
+      // Handle episode number editing
       if (e.target.classList.contains('episode-number')) {
         e.stopPropagation();
         this.episodeManager.makeEpisodeRangeEditable(e.target);
+        return;
       }
       
       // Handle episode arrow buttons
@@ -77,6 +79,20 @@ class UIManager {
         e.stopPropagation();
         const direction = e.target.classList.contains('episode-arrow-left') ? 'left' : 'right';
         this.handleEpisodeArrowClick(e.target, direction);
+        return;
+      }
+      
+      // Handle tag icon clicks
+      if (e.target.classList.contains('tag-icon')) {
+        e.stopPropagation();
+        const tagIcon = e.target;
+        const tagType = tagIcon.classList.contains('extra-tag') ? 'extra' :
+                        tagIcon.classList.contains('behind-the-scenes-tag') ? 'behind-the-scenes' :
+                        tagIcon.classList.contains('delete-tag') ? 'delete' : null;
+        
+        if (tagType) {
+          this.handleTagClick(tagIcon, tagType);
+        }
       }
     });
 
@@ -785,6 +801,35 @@ class UIManager {
     this.updateEpisodeNumbers();
   }
 
+  /**
+   * Handle tag icon clicks
+   * @param {HTMLElement} tagIcon - The clicked tag icon element
+   * @param {string} tagType - The tag type (extra, behind-the-scenes, delete)
+   */
+  handleTagClick(tagIcon, tagType) {
+    console.log(`Tag click: ${tagType}`);
+    
+    // Get the file name element from the tag icon's parent
+    const fileItem = tagIcon.closest('.file-item');
+    const fileNameEl = fileItem.querySelector('.file-name');
+    
+    if (!fileNameEl) return;
+    
+    const filePath = fileNameEl.dataset.filePath;
+    console.log(`Tagging file: ${filePath} as ${tagType}`);
+    
+    // Add or remove the tag
+    if (fileItem.hasAttribute(`data-tagged-${tagType}`)) {
+      // Untag if already tagged
+      console.log(`Untagging file: ${filePath} from ${tagType}`);
+      this.untagFile(filePath, tagType);
+    } else {
+      // Tag the file
+      console.log(`Tagging file: ${filePath} as ${tagType}`);
+      this.addTagToEpisode(filePath, tagType);
+    }
+  }
+
   /**
    * Function to handle tagging
    */