1 files changed, 21 insertions, 27 deletions
diff --git a/web_src/js/features/comp/ReactionSelector.ts b/web_src/js/features/comp/ReactionSelector.ts
index e93e3b8377..bb54593f11 100644
--- a/web_src/js/features/comp/ReactionSelector.ts
+++ b/web_src/js/features/comp/ReactionSelector.ts
@@ -1,37 +1,31 @@
 import {POST} from '../../modules/fetch.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
 import type {DOMEvent} from '../../utils/dom.ts';
+import {registerGlobalEventFunc} from '../../modules/observer.ts';
 
-export function initCompReactionSelector(parent: ParentNode = document) {
-  for (const container of parent.querySelectorAll<HTMLElement>('.issue-content, .diff-file-body')) {
-    container.addEventListener('click', async (e: DOMEvent<MouseEvent>) => {
-      // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
-      const target = e.target.closest('.comment-reaction-button');
-      if (!target) return;
-      e.preventDefault();
+export function initCompReactionSelector() {
+  registerGlobalEventFunc('click', 'onCommentReactionButtonClick', async (target: HTMLElement, e: DOMEvent<MouseEvent>) => {
+    // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
+    e.preventDefault();
 
-      if (target.classList.contains('disabled')) return;
+    if (target.classList.contains('disabled')) return;
 
-      const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
-      const reactionContent = target.getAttribute('data-reaction-content');
+    const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
+    const reactionContent = target.getAttribute('data-reaction-content');
 
-      const commentContainer = target.closest('.comment-container');
+    const commentContainer = target.closest('.comment-container');
 
-      const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
-      const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
-      const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
+    const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
+    const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
+    const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
 
-      const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
-        data: new URLSearchParams({content: reactionContent}),
-      });
-
-      const data = await res.json();
-      bottomReactions?.remove();
-      if (data.html) {
-        commentContainer.insertAdjacentHTML('beforeend', data.html);
-        const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');
-        fomanticQuery(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
-      }
+    const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
+      data: new URLSearchParams({content: reactionContent}),
     });
-  }
+
+    const data = await res.json();
+    bottomReactions?.remove();
+    if (data.html) {
+      commentContainer.insertAdjacentHTML('beforeend', data.html);
+    }
+  });
 }