comments: rework thresholded comments.

Previously thresholded comments were hidden completely. You had to click
the "Show X hidden comments" button to unhide all hidden comments in a
thread. Now it works like this:

* When a comment is below your threshold, the comment text is hidden and
  replaced by a `[hidden]` link, which you can click to unhide the comment.

* When a comment is at half your threshold (for example, your threshold
  is -8 but the comment is at -4), then the comment is greyed out.

This means that comments aren't completely hidden, they're just
collapsed, so you can see the commenter and the score without unhiding
the comment. It also means you don't have to scroll back up to unhide a
comment, and threads aren't disrupted by comments being secretly
hidden (which is confusing when people are replying to hidden comments,
which forces you to go back up and unhide to find).

app/components/application_component.rb

@@ -1,2 +1,5 @@
 class ApplicationComponent < ViewComponent::Base
+  def policy(subject)
+    Pundit.policy!(current_user, subject)
+  end
 end

app/components/comment_component.rb

@@ -2,17 +2,8 @@
 
 class CommentComponent < ApplicationComponent
   attr_reader :comment, :context, :dtext_data, :show_deleted, :current_user
-  delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :policy, to: :helpers
+  delegate :link_to_user, :time_ago_in_words_tagged, :format_text, to: :helpers
 
-  def self.with_collection(comments, current_user:, **options)
-    dtext_data = DText.preprocess(comments.map(&:body))
-    # XXX
-    #comments = comments.includes(:moderation_reports) if Pundit.policy!(current_user, ModerationReport).show?
-
-    super(comments, current_user: current_user, dtext_data: dtext_data, **options)
-  end
-
-  # XXX calls to pundit policy don't respect current_user.
   def initialize(comment:, current_user:, context: nil, dtext_data: nil, show_deleted: false)
     @comment = comment
     @context = context
@@ -25,6 +16,14 @@ class CommentComponent < ApplicationComponent
     !comment.is_deleted? || show_deleted || current_user.is_moderator?
   end
 
+  def dimmed?
+    !comment.is_sticky? && comment.score < current_user.comment_threshold/2.0
+  end
+
+  def thresholded?
+    !comment.is_sticky? && comment.score < current_user.comment_threshold
+  end
+
   def has_moderation_reports?
     policy(ModerationReport).show? && comment.moderation_reports.present?
   end

app/components/comment_component/comment_component.html.erb

@@ -8,7 +8,8 @@
           data-do-not-bump-post="<%= comment.do_not_bump_post? %>"
           data-is-deleted="<%= comment.is_deleted? %>"
           data-is-sticky="<%= comment.is_sticky? %>"
-          data-below-threshold="<%= comment.score < current_user.comment_threshold %>"
+          data-is-dimmed="<%= dimmed? %>"
+          data-is-thresholded="<%= thresholded? %>"
           data-is-reported="<%= has_moderation_reports? %>"
           data-is-voted="<%= comment.voted_by?(current_user) %>">
   <div class="author">
@@ -21,10 +22,14 @@
     <%= link_to time_ago_in_words_tagged(comment.created_at), post_path(comment.post, anchor: "comment_#{comment.id}"), class: "message-timestamp" %>
   </div>
   <div class="content">
-    <div class="body prose">
+    <% if thresholded? %>
+      <%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link" %>
+    <% end %>
+
+    <%= tag.div class: "body prose", style: ("display: none;" if thresholded?) do %>
       <%= format_text(comment.body, data: dtext_data) %>
-    </div>
-    <%= render "application/update_notice", record: comment %>
+      <%= render "application/update_notice", record: comment %>
+    <% end %>
 
     <% if policy(comment).create? %>
       <menu>

app/components/comment_component/comment_component.scss

@@ -21,7 +21,7 @@ article.comment {
     }
   }
 
-  &[data-below-threshold="true"][data-is-sticky="false"] {
+  &[data-is-dimmed="true"] {
     opacity: 0.3;
 
     &:hover {
@@ -29,6 +29,11 @@ article.comment {
     }
   }
 
+  .unhide-comment-link {
+    margin-bottom: 1em;
+    display: block;
+  }
+
   .moderation-report-notice {
     font-weight: bold;
     color: var(--moderation-report-text-color);

app/components/comment_section_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class CommentSectionComponent < ApplicationComponent
+  attr_reader :post, :comments, :current_user, :limit, :dtext_data
+
+  def initialize(post:, current_user:, limit: nil)
+    @post = post
+    @current_user = current_user
+    @limit = limit
+
+    @comments = @post.comments.order(id: :asc)
+    @comments = @comments.includes(:creator)
+    @comments = @comments.includes(:votes) if !current_user.is_anonymous?
+    @comments = @comments.includes(:moderation_reports) if policy(ModerationReport).show?
+    @comments = @comments.last(limit) if limit.present?
+
+    @dtext_data = DText.preprocess(@comments.map(&:body))
+  end
+
+  def has_unloaded_comments?
+    unloaded_comment_count > 0
+  end
+
+  def unloaded_comment_count
+    return 0 if limit.nil?
+    [post.comments.size - limit, 0].max
+  end
+end

app/components/comment_section_component/comment_section_component.html.erb

@@ -0,0 +1,20 @@
+<div class="comments-for-post" data-post-id="<%= post.id %>">
+  <% if has_unloaded_comments? %>
+    <%= link_to "Show #{pluralize unloaded_comment_count, "more comment"}", comments_path(post_id: post.id), class: "show-all-comments-link", remote: true %>
+  <% end %>
+
+  <div class="list-of-comments list-of-messages">
+    <% if comments.present? %>
+      <%= render CommentComponent.with_collection(comments, current_user: current_user, context: :index_by_post, dtext_data: dtext_data) %>
+    <% else %>
+      <p>There are no comments.</p>
+    <% end %>
+  </div>
+
+  <% if policy(Comment).create? %>
+    <div class="new-comment">
+      <p><%= link_to "Post comment", new_comment_path(comment: { post_id: post.id }), class: "expand-comment-response" %></p>
+      <%= render "comments/form", comment: post.comments.new, hidden: true %>
+    </div>
+  <% end %>
+</div>