From ff7a36394ac57300c6984754bea399bf5731e474 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Sat, 12 Apr 2025 16:15:29 +0800
Subject: [PATCH] refactor: Optimize event handling for folder tags using
 delegation

---
 static/js/components/controls/PageControls.js | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/static/js/components/controls/PageControls.js b/static/js/components/controls/PageControls.js
index 77599fca..b30151c1 100644
--- a/static/js/components/controls/PageControls.js
+++ b/static/js/components/controls/PageControls.js
@@ -66,10 +66,16 @@ export class PageControls {
             });
         }
         
-        // Folder tags handler
-        document.querySelectorAll('.folder-tags .tag').forEach(tag => {
-            tag.addEventListener('click', (e) => this.handleFolderClick(e.currentTarget));
-        });
+        // Use event delegation for folder tags - this is the key fix
+        const folderTagsContainer = document.querySelector('.folder-tags-container');
+        if (folderTagsContainer) {
+            folderTagsContainer.addEventListener('click', (e) => {
+                const tag = e.target.closest('.tag');
+                if (tag) {
+                    this.handleFolderClick(tag);
+                }
+            });
+        }
         
         // Refresh button handler
         const refreshBtn = document.querySelector('[data-action="refresh"]');
@@ -186,14 +192,11 @@ export class PageControls {
         // Update the container
         folderTagsContainer.innerHTML = tagsHTML;
 
-        // Reattach click handlers
-        const tags = folderTagsContainer.querySelectorAll('.tag');
-        tags.forEach(tag => {
-            tag.addEventListener('click', (e) => this.handleFolderClick(e.currentTarget));
-            if (tag.dataset.folder === currentFolder) {
-                tag.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-            }
-        });
+        // Scroll active folder into view (no need to reattach click handlers)
+        const activeTag = folderTagsContainer.querySelector(`.tag[data-folder="${currentFolder}"]`);
+        if (activeTag) {
+            activeTag.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
     }
     
     /**