Rewrite and restyle reaction selector and enable no-sizzle eslint rule

.eslintrc.yaml

@@ -318,7 +318,7 @@ rules:
   jquery/no-serialize: [2]
   jquery/no-show: [2]
   jquery/no-size: [2]
-  jquery/no-sizzle: [0]
+  jquery/no-sizzle: [2]
   jquery/no-slide: [0]
   jquery/no-submit: [0]
   jquery/no-text: [0]
@@ -470,7 +470,7 @@ rules:
   no-jquery/no-selector-prop: [2]
   no-jquery/no-serialize: [2]
   no-jquery/no-size: [2]
-  no-jquery/no-sizzle: [0]
+  no-jquery/no-sizzle: [2]
   no-jquery/no-slide: [2]
   no-jquery/no-sub: [2]
   no-jquery/no-support: [2]

web_src/js/features/comp/ReactionSelector.js

@@ -1,38 +1,42 @@
 import $ from 'jquery';
 import {POST} from '../../modules/fetch.js';
 
-export function initCompReactionSelector($parent) {
-  $parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) {
-    e.preventDefault();
+export function initCompReactionSelector() {
+  for (const container of document.querySelectorAll('.comment-list, .diff-file-body')) {
+    container.addEventListener('click', async (e) => {
+      const item = e.target.closest('.item.reaction');
+      const button = e.target.closest('.comment-reaction-button');
+      if (!item && !button) return;
+      e.preventDefault();
 
-    if (this.classList.contains('disabled')) return;
+      const target = item || button;
+      if (target.classList.contains('disabled')) return;
 
-    const actionUrl = this.closest('[data-action-url]')?.getAttribute('data-action-url');
-    const reactionContent = this.getAttribute('data-reaction-content');
-    const hasReacted = this.closest('.ui.segment.reactions')?.querySelector(`a[data-reaction-content="${reactionContent}"]`)?.getAttribute('data-has-reacted') === 'true';
+      const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
+      const reactionContent = target.getAttribute('data-reaction-content');
+      const hasReacted = target.closest('.segment.reactions').querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`).getAttribute('data-has-reacted') === 'true';
+      const content = target.closest('.content');
 
-    const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
-      data: new URLSearchParams({content: reactionContent}),
-    });
+      const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
+        data: new URLSearchParams({content: reactionContent}),
+      });
 
-    const data = await res.json();
-    if (data && (data.html || data.empty)) {
-      const $content = $(this).closest('.content');
-      let $react = $content.find('.segment.reactions');
-      if ((!data.empty || data.html === '') && $react.length > 0) {
-        $react.remove();
-      }
-      if (!data.empty) {
-        const $attachments = $content.find('.segment.bottom:first');
-        $react = $(data.html);
-        if ($attachments.length > 0) {
-          $react.insertBefore($attachments);
-        } else {
-          $react.appendTo($content);
+      const data = await res.json();
+      if (data && (data.html || data.empty)) {
+        const reactions = content.querySelector('.segment.reactions');
+        if ((!data.empty || data.html === '') && reactions) {
+          reactions.remove();
+        }
+        if (!data.empty) {
+          const attachments = content.querySelector('.segment.bottom');
+          if (attachments) {
+            attachments.insertAdjacentHTML('beforebegin', data.html);
+          } else {
+            content.insertAdjacentHTML('beforeend', data.html);
+          }
+          $(content.querySelectorAll('.segment.reactions .dropdown')).dropdown();
         }
-        $react.find('.dropdown').dropdown();
-        initCompReactionSelector($react);
       }
-    }
-  });
+    });
+  }
 }

web_src/js/features/repo-diff.js

@@ -87,7 +87,6 @@ function initRepoDiffConversationForm() {
         el.classList.add('tw-invisible');
       }
       $newConversationHolder.find('.dropdown').dropdown();
-      initCompReactionSelector($newConversationHolder);
     } catch (error) {
       console.error('Error:', error);
       showErrorToast(i18n.network_error);

web_src/js/features/repo-legacy.js

@@ -393,7 +393,7 @@ export function initRepository() {
     initRepoIssueDependencyDelete();
     initRepoIssueCodeCommentCancel();
     initRepoPullRequestUpdate();
-    initCompReactionSelector($(document));
+    initCompReactionSelector();
 
     initRepoPullRequestMergeForm();
     initRepoPullRequestCommitStatus();