Fix #4931: Add popup voter list for comments.

Show the comment's upvote and downvote count when you hover over a
comment's score. For mods, show the list of voters as well.

app/components/comment_component/comment_component.html.erb

@@ -53,13 +53,13 @@
             <%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "1"), class: "comment-upvote-link inactive-link", method: :post, remote: true %>
           <% end %>
 
-          <% if policy(CommentVote).can_see_votes? %>
-            <%= link_to comment_votes_path(search: { comment_id: comment.id }, variant: "compact"), class: "inactive-link" do %>
-              <span class="comment-score"><%= comment.score %></span>
+          <span class="comment-score">
+            <% if policy(CommentVote).can_see_votes? %>
+              <%= link_to comment.score, comment_votes_path(search: { comment_id: comment.id }, variant: "compact"), class: "inactive-link" %>
+            <% else %>
+              <%= comment.score %>
             <% end %>
-          <% else %>
-            <span class="comment-score"><%= comment.score %></span>
-          <% end %>
+          </span>
 
           <% if current_user.is_anonymous? %>
             <%= link_to downvote_icon, login_path(url: request.fullpath), class: "comment-downvote-link inactive-link" %>

app/components/comment_component/comment_component.scss

@@ -36,6 +36,7 @@ article.comment {
       text-align: center;
       min-width: 1.25em;
       white-space: nowrap;
+      vertical-align: middle;
     }
 
     .icon {

app/components/comment_votes_tooltip_component.rb

@@ -0,0 +1,32 @@
+# This component represents the tooltip that displays when you hover over a comment's score.
+class CommentVotesTooltipComponent < ApplicationComponent
+  attr_reader :comment, :current_user
+  delegate :upvote_icon, :downvote_icon, to: :helpers
+
+  def initialize(comment:, current_user:)
+    super
+    @comment = comment
+    @current_user = current_user
+  end
+
+  def votes
+    comment.votes.active.includes(:user).order(id: :desc)
+  end
+
+  def upvote_count
+    votes.select(&:is_positive?).length
+  end
+
+  def downvote_count
+    votes.select(&:is_negative?).length
+  end
+
+  def upvote_ratio
+    return nil if votes.length == 0
+    sprintf("(%.1f%%)", 100.0 * upvote_count / votes.length)
+  end
+
+  def vote_icon(vote)
+    vote.is_positive? ? upvote_icon : downvote_icon
+  end
+end

app/components/comment_votes_tooltip_component/comment_votes_tooltip_component.html.erb

@@ -0,0 +1,15 @@
+<div class="comment-votes-tooltip thin-scrollbar text-xs">
+  <div class="text-center text-muted whitespace-nowrap">
+    +<%= upvote_count %> / -<%= downvote_count %> <%= upvote_ratio %>
+  </div>
+
+  <% if policy(CommentVote).can_see_votes? %>
+    <div class="comment-voters">
+      <% votes.each do |vote| %>
+        <div class="comment-voter truncate">
+          <%= vote_icon(vote) %> <%= link_to_user(vote.user, classes: "align-middle") %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

app/components/comment_votes_tooltip_component/comment_votes_tooltip_component.js

@@ -0,0 +1,65 @@
+import Utility from "../../javascript/src/javascripts/utility.js";
+import { delegate, hideAll } from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+
+class CommentVotesTooltipComponent {
+  // Trigger on the comment score link; see CommentComponent.
+  static TARGET_SELECTOR = "span.comment-score";
+  static SHOW_DELAY = 125;
+  static HIDE_DELAY = 125;
+  static DURATION = 250;
+  static instance = null;
+
+  static initialize() {
+    if ($(CommentVotesTooltipComponent.TARGET_SELECTOR).length === 0) {
+      return;
+    }
+
+    CommentVotesTooltipComponent.instance = delegate("body", {
+      allowHTML: true,
+      appendTo: document.querySelector("#comment-votes-tooltips"),
+      delay: [CommentVotesTooltipComponent.SHOW_DELAY, CommentVotesTooltipComponent.HIDE_DELAY],
+      duration: CommentVotesTooltipComponent.DURATION,
+      interactive: true,
+      maxWidth: "none",
+      target: CommentVotesTooltipComponent.TARGET_SELECTOR,
+      theme: "common-tooltip",
+      touch: false,
+
+      onShow: CommentVotesTooltipComponent.onShow,
+      onHide: CommentVotesTooltipComponent.onHide,
+    });
+  }
+
+  static async onShow(instance) {
+    let $target = $(instance.reference);
+    let $tooltip = $(instance.popper);
+    let commentId = $target.parents("[data-id]").data("id");
+
+    hideAll({ exclude: instance });
+
+    try {
+      $tooltip.addClass("tooltip-loading");
+
+      instance._request = $.get(`/comments/${commentId}/votes`, { variant: "tooltip" });
+      let html = await instance._request;
+      instance.setContent(html);
+
+      $tooltip.removeClass("tooltip-loading");
+    } catch (error) {
+      if (error.status !== 0 && error.statusText !== "abort") {
+        Utility.error(`Error displaying votes for comment #${commentId} (error: ${error.status} ${error.statusText})`);
+      }
+    }
+  }
+
+  static async onHide(instance) {
+    if (instance._request?.state() === "pending") {
+      instance._request.abort();
+    }
+  }
+}
+
+$(document).ready(CommentVotesTooltipComponent.initialize);
+
+export default CommentVotesTooltipComponent;

app/components/comment_votes_tooltip_component/comment_votes_tooltip_component.scss

@@ -0,0 +1,15 @@
+.comment-votes-tooltip {
+  max-height: 240px;
+
+  .upvote-icon {
+    color: var(--post-upvote-color);
+  }
+
+  .downvote-icon {
+    color: var(--post-downvote-color);
+  }
+
+  .comment-voter {
+    max-width: 160px;
+  }
+}

app/components/post_votes_tooltip_component/post_votes_tooltip_component.html.erb

@@ -1,4 +1,4 @@
-<div class="post-votes-tooltip thin-scrollbar">
+<div class="post-votes-tooltip thin-scrollbar text-xs">
   <div class="text-center text-muted whitespace-nowrap">
     +<%= post.up_score %> / -<%= post.down_score.abs %> <%= upvote_ratio %>
   </div>

app/components/post_votes_tooltip_component/post_votes_tooltip_component.scss

@@ -1,5 +1,4 @@
 .post-votes-tooltip {
-  font-size: var(--text-xs);
   max-height: 240px;
 
   .upvote-icon {