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]

routers/web/repo/issue.go

@@ -3318,7 +3318,6 @@ func ChangeIssueReaction(ctx *context.Context) {
 	}
 
 	html, err := ctx.RenderToHTML(tplReactions, map[string]any{
-		"ctxData":   ctx.Data,
 		"ActionURL": fmt.Sprintf("%s/issues/%d/reactions", ctx.Repo.RepoLink, issue.Index),
 		"Reactions": issue.Reactions.GroupByType(),
 	})
@@ -3425,7 +3424,6 @@ func ChangeCommentReaction(ctx *context.Context) {
 	}
 
 	html, err := ctx.RenderToHTML(tplReactions, map[string]any{
-		"ctxData":   ctx.Data,
 		"ActionURL": fmt.Sprintf("%s/comments/%d/reactions", ctx.Repo.RepoLink, comment.ID),
 		"Reactions": comment.Reactions.GroupByType(),
 	})

services/context/context.go

@@ -101,6 +101,7 @@ func NewTemplateContextForWeb(ctx *Context) TemplateContext {
 	tmplCtx := NewTemplateContext(ctx)
 	tmplCtx["Locale"] = ctx.Base.Locale
 	tmplCtx["AvatarUtils"] = templates.NewAvatarUtils(ctx)
+	tmplCtx["RootData"] = ctx.Data
 	return tmplCtx
 }
 

templates/repo/diff/comments.tmpl

@@ -48,7 +48,7 @@
 						</div>
 					{{end}}
 				{{end}}
-				{{template "repo/issue/view_content/add_reaction" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID)}}
+				{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID)}}
 				{{template "repo/issue/view_content/context_menu" dict "ctxData" $.root "item" . "delete" true "issue" false "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}
 			</div>
 		</div>
@@ -68,7 +68,7 @@
 		</div>
 		{{$reactions := .Reactions.GroupByType}}
 		{{if $reactions}}
-			{{template "repo/issue/view_content/reactions" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}}
+			{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}}
 		{{end}}
 	</div>
 </div>

templates/repo/issue/view_content.tmpl

@@ -46,7 +46,7 @@
 						<div class="comment-header-right actions tw-flex tw-items-center">
 							{{template "repo/issue/view_content/show_role" dict "ShowRole" .Issue.ShowRole "IgnorePoster" true}}
 							{{if not $.Repository.IsArchived}}
-								{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}
+								{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}
 							{{end}}
 							{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" .Issue "delete" false "issue" true "diff" false "IsCommentPoster" $.IsIssuePoster}}
 						</div>
@@ -67,7 +67,7 @@
 					</div>
 					{{$reactions := .Issue.Reactions.GroupByType}}
 					{{if $reactions}}
-						{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
+						{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
 					{{end}}
 				</div>
 			</div>

templates/repo/issue/view_content/add_reaction.tmpl

@@ -1,11 +1,9 @@
-{{if .ctxData.IsSigned}}
+{{if ctx.RootData.IsSigned}}
 <div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}">
-	<a class="add-reaction muted">
-		{{svg "octicon-smiley"}}
-	</a>
-	<div class="menu reactions-menu">
+	<a class="muted">{{svg "octicon-smiley"}}</a>
+	<div class="menu">
 		{{range $value := AllowedReactions}}
-			<a class="item reaction" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
+		<a class="item comment-reaction-button" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}"><span class="emoji">{{ReactionToEmoji $value}}</span></a>
 		{{end}}
 	</div>
 </div>

templates/repo/issue/view_content/comments.tmpl

@@ -53,7 +53,7 @@
 						<div class="comment-header-right actions tw-flex tw-items-center">
 							{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
 							{{if not $.Repository.IsArchived}}
-								{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
+								{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
 							{{end}}
 							{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
 						</div>
@@ -74,7 +74,7 @@
 					</div>
 					{{$reactions := .Reactions.GroupByType}}
 					{{if $reactions}}
-						{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
+						{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
 					{{end}}
 				</div>
 			</div>
@@ -427,7 +427,7 @@
 							<div class="comment-header-right actions tw-flex tw-items-center">
 								{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
 								{{if not $.Repository.IsArchived}}
-									{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
+									{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
 									{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" false "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
 								{{end}}
 							</div>
@@ -448,7 +448,7 @@
 						</div>
 						{{$reactions := .Reactions.GroupByType}}
 						{{if $reactions}}
-							{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
+							{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
 						{{end}}
 					</div>
 				</div>

templates/repo/issue/view_content/conversation.tmpl

@@ -56,7 +56,7 @@
 				{{range .comments}}
 					{{$createdSubStr:= TimeSinceUnix .CreatedUnix ctx.Locale}}
 					<div class="comment code-comment tw-pb-4" id="{{.HashTag}}">
-						<div class="content">
+						<div class="content comment-container">
 							<div class="header comment-header">
 								<div class="comment-header-left tw-flex tw-items-center">
 									{{if not .OriginalAuthor}}
@@ -82,7 +82,7 @@
 								<div class="comment-header-right actions tw-flex tw-items-center">
 									{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
 									{{if not $.Repository.IsArchived}}
-										{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
+										{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
 										{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" true "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
 									{{end}}
 								</div>
@@ -103,7 +103,7 @@
 							</div>
 							{{$reactions := .Reactions.GroupByType}}
 							{{if $reactions}}
-								{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
+								{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
 							{{end}}
 						</div>
 					</div>

templates/repo/issue/view_content/reactions.tmpl

@@ -1,7 +1,7 @@
 <div class="ui attached segment reactions" data-action-url="{{$.ActionURL}}">
 {{range $key, $value := .Reactions}}
-	{{$hasReacted := $value.HasUser $.ctxData.SignedUserID}}
-	<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not $.ctxData.IsSigned}} disabled{{end}} comment-reaction-button"
+	{{$hasReacted := $value.HasUser ctx.RootData.SignedUserID}}
+	<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not ctx.RootData.IsSigned}} disabled{{end}} comment-reaction-button"
 		data-tooltip-content
 		title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
 		aria-label="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
@@ -12,6 +12,6 @@
 	</a>
 {{end}}
 {{if AllowedReactions}}
-	{{template "repo/issue/view_content/add_reaction" dict "ctxData" $.ctxData "ActionURL" .ActionURL}}
+	{{template "repo/issue/view_content/add_reaction" dict "ActionURL" .ActionURL}}
 {{end}}
 </div>

web_src/css/base.css

@@ -1366,17 +1366,15 @@ table th[data-sortt-desc] .svg {
   box-shadow: 0 0 0 1px var(--color-secondary) inset;
 }
 
-.emoji,
-.reaction {
+.emoji {
   font-size: 1.25em;
   line-height: var(--line-height-default);
   font-style: normal !important;
   font-weight: var(--font-weight-normal) !important;
   vertical-align: -0.075em;
 }
 
-.emoji img,
-.reaction img {
+.emoji img {
   border-width: 0 !important;
   margin: 0 !important;
   width: 1em !important;

web_src/css/repo.css

@@ -930,6 +930,10 @@ td .commit-summary {
   border-radius: var(--border-radius);
 }
 
+.repository.view.issue .comment-list .conversation-holder .comment .comment-container {
+  border: none;
+}
+
 @media (max-width: 767.98px) {
   .repository.view.issue .comment-list .comment .content .form .button {
     width: 100%;
@@ -1902,19 +1906,12 @@ td .commit-summary {
   border-bottom: 1px solid var(--color-warning-border);
 }
 
-.repository .segment.reactions.dropdown .menu,
 .repository .select-reaction.dropdown .menu {
   right: 0 !important;
   left: auto !important;
   min-width: 170px;
 }
 
-.repository .segment.reactions.dropdown .menu > .header,
-.repository .select-reaction.dropdown .menu > .header {
-  margin: 0.75rem 0 0.5rem;
-}
-
-.repository .segment.reactions.dropdown .menu > .item,
 .repository .select-reaction.dropdown .menu > .item {
   float: left;
   margin: 4px;
@@ -1978,20 +1975,15 @@ td .commit-summary {
 }
 
 .repository .segment.reactions .select-reaction {
-  display: flex;
-  align-items: center;
-}
-
-.repository .segment.reactions .select-reaction a {
   padding: 0 14px;
 }
 
-.repository .segment.reactions .select-reaction:not(.active) a {
-  display: none;
+.repository .segment.reactions .select-reaction:not(.active) {
+  visibility: hidden;
 }
 
-.repository .segment.reactions:hover .select-reaction a {
-  display: block;
+.repository .segment.reactions:hover .select-reaction {
+  visibility: visible;
 }
 
 .repository .ui.fluid.action.input .ui.search.action.input {

web_src/js/features/comp/ReactionSelector.js

@@ -1,38 +1,36 @@
 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('.issue-content, .diff-file-body')) {
+    container.addEventListener('click', async (e) => {
+      // 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();
 
-    if (this.classList.contains('disabled')) return;
+      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 res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
-      data: new URLSearchParams({content: reactionContent}),
-    });
+      const commentContainer = target.closest('.comment-container');
 
-    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);
-        }
-        $react.find('.dropdown').dropdown();
-        initCompReactionSelector($react);
+      const bottomReactions = commentContainer.querySelector('.segment.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('.segment.reactions .dropdown.select-reaction');
+        $(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
       }
-    }
-  });
+    });
+  }
 }

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();