Add tagged items counter to floating circle with animation

index.html

@@ -336,8 +336,8 @@
     <script src="renderer.js"></script>
 
     <!-- Floating circle on bottom right -->
-    <div class="floating-circle">
-        <i>ℹ️</i>
+    <div class="floating-circle" id="tagged-circle">
+        <span id="tagged-count">0</span>
     </div>
 </body>
 </html>

renderer.js

@@ -242,6 +242,9 @@ function addTagToEpisode(filePath, tagType) {
     }
   });
   
+  // Update the tagged count display
+  updateTaggedCount();
+  
   // In a real implementation, this would save to a database or file
   // For now, we'll just log to console
   console.log(`File ${filePath} tagged as ${tagType} - would be saved in real implementation`);
@@ -273,11 +276,44 @@ function untagFile(filePath, tagType) {
     }
   });
   
+  // Update the tagged count display
+  updateTaggedCount();
+  
   // In a real implementation, this would remove from database or file
   // For now, we'll just log to console
   console.log(`File ${filePath} untagged from ${tagType} - would be removed in real implementation`);
 }
 
+// Function to update the tagged items count display
+function updateTaggedCount() {
+  const taggedItems = document.querySelectorAll('.file-item[data-tagged-extra], .file-item[data-tagged-commentary]');
+  const count = taggedItems.length;
+  const taggedCircle = document.getElementById('tagged-circle');
+  const taggedCount = document.getElementById('tagged-count');
+  
+  if (taggedCount) {
+    taggedCount.textContent = count;
+  }
+  
+  // Animate the circle position based on count
+  if (taggedCircle) {
+    if (count === 0) {
+      // Drop to bottom
+      taggedCircle.style.transform = 'translateY(0)';
+      taggedCircle.style.bottom = '20px';
+    } else {
+      // Move up to show count
+      taggedCircle.style.transform = 'translateY(-30px)';
+      taggedCircle.style.bottom = '50px';
+    }
+  }
+}
+
+// Initialize tagged count on page load
+document.addEventListener('DOMContentLoaded', function() {
+  updateTaggedCount();
+});
+
 // Search shows function
 async function searchShows() {
   const query = searchInput.value.trim();