Fix #5021: Downvoting/upvoting a revealed hidden comment will hide it again.

Fix it so that upvoting or downvoting a revealed thresholded comment
doesn't hide it again.

The fix is to explicitly store a `data-show-thresholded` flag on the
comment, instead of manually hiding elements with jQuery, and to morph
the comment HTML instead of replacing it so that the state isn't lost
after voting. Alpine.js is used for this, which isn't strictly necessary,
but is useful to test the library before adopting it on a wider scale.

https://alpinejs.dev/start-here

app/components/comment_component/comment_component.html.erb

@@ -1,4 +1,6 @@
 <article id="comment_<%= comment.id %>" class="comment message"
+          x-data="{ showThresholded: false }"
+          x-bind:data-show-thresholded="String(showThresholded)"
           data-id="<%= comment.id %>"
           data-post-id="<%= comment.post_id %>"
           data-creator-id="<%= comment.creator_id unless redact_deleted? %>"
@@ -11,7 +13,8 @@
           data-is-thresholded="<%= thresholded? %>"
           data-is-reported="<%= reported? %>"
           data-is-upvoted="<%= upvoted? %>"
-          data-is-downvoted="<%= downvoted? %>">
+          data-is-downvoted="<%= downvoted? %>"
+          data-show-thresholded="false">
 
   <div class="author">
     <div class="author-name">
@@ -28,11 +31,9 @@
   </div>
 
   <div class="content">
-    <% if thresholded? %>
-      <%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link" %>
-    <% end %>
+    <%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link", "x-on:click": "showThresholded = true" %>
 
-    <%= tag.div class: "body prose", style: ("display: none;" if thresholded?) do %>
+    <%= tag.div class: "body prose" do %>
       <% if redact_deleted? %>
         <p>[deleted]</p>
       <% else %>

app/components/comment_component/comment_component.scss

@@ -17,6 +17,14 @@ article.comment {
     }
   }
 
+  &[data-is-thresholded="true"][data-show-thresholded="false"] {
+    .body { display: none; }
+  }
+
+  &[data-is-thresholded="false"], &[data-is-thresholded="true"][data-show-thresholded="true"] {
+    .unhide-comment-link { display: none; }
+  }
+
   .unhide-comment-link {
     margin-bottom: 0.75rem;
     display: block;

app/javascript/packs/application.js

@@ -10,6 +10,8 @@ require('@rails/ujs').start();
 require('hammerjs');
 require('jquery-hotkeys');
 import morphdom from 'morphdom';
+import Alpine from 'alpinejs';
+import morph from '@alpinejs/morph';
 
 // should start looking for nodejs replacements
 importAll(require.context('../vendor', true, /\.js$/));
@@ -93,4 +95,8 @@ Danbooru.error = Utility.error;
 window.$ = jQuery;
 window.jQuery = jQuery;
 window.morphdom = morphdom;
+window.Alpine = Alpine;
 window.Danbooru = Danbooru;
+
+Alpine.plugin(morph);
+Alpine.start();

app/javascript/src/javascripts/comment_component.js

@@ -5,7 +5,6 @@ class CommentComponent {
     if ($("#c-posts #a-show, #c-comments").length) {
       $(document).on("click.danbooru.comment", ".edit_comment_link", CommentComponent.showEditForm);
       $(document).on("click.danbooru.comment", ".expand-comment-response", CommentComponent.showNewCommentForm);
-      $(document).on("click.danbooru.comment", ".unhide-comment-link", CommentComponent.unhideComment);
       $(document).on("click.danbooru.comment", ".comment-copy-id", CommentComponent.copyID);
       $(document).on("click.danbooru.comment", ".comment-copy-link", CommentComponent.copyLink);
     }
@@ -25,13 +24,6 @@ class CommentComponent {
     e.preventDefault();
   }
 
-  static unhideComment(e) {
-    let $comment = $(this).closest(".comment");
-    $comment.find(".unhide-comment-link").hide();
-    $comment.find(".body").show();
-    e.preventDefault();
-  }
-
   static async copyID(e) {
     let id = $(this).closest(".comment").data("id");
     let link = `comment #${id}`;

app/views/comment_votes/create.js.erb

@@ -2,5 +2,8 @@
   Danbooru.Utility.notice("<%= j flash[:notice] %>");
 <% end %>
 
-var $comment = $("article#comment_<%= @comment_vote.comment_id %>");
-$comment.replaceWith("<%= j render_comment(@comment_vote.comment, current_user: CurrentUser.user) %>");
+$(function() {
+  let $comment = $("article#comment_<%= @comment_vote.comment_id %>").get(0);
+  let html = "<%= j render_comment(@comment_vote.comment, current_user: CurrentUser.user) %>";
+  Alpine.morph($comment, html);
+});

package.json

@@ -1,6 +1,7 @@
 {
   "license": "MIT",
   "dependencies": {
+    "@alpinejs/morph": "^3.9.0",
     "@babel/plugin-proposal-decorators": "^7.16.7",
     "@fontsource/anton": "^4.0.0",
     "@fontsource/archivo-narrow": "^4.0.0",
@@ -14,6 +15,7 @@
     "@rails/ujs": "^7.0.1",
     "@rails/webpacker": "=6.0.0-rc.6",
     "@ruffle-rs/ruffle": "0.1.0-nightly.2022.1.31",
+    "alpinejs": "^3.9.0",
     "core-js": "^3.20.3",
     "css-loader": "^6.5.1",
     "dropzone": "^6.0.0-beta.2",

yarn.lock

@@ -5,6 +5,13 @@ __metadata:
   version: 4
   cacheKey: 7
 
+"@alpinejs/morph@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "@alpinejs/morph@npm:3.9.0"
+  checksum: 8c338eaa902dfe5bb5c80023ee00e579401de02080f4fafa4455d44ddb6a4949178e8fbe6146b312b44c0876ca6da5606d9f94f45e77fa0338ea45d71b3b2baa
+  languageName: node
+  linkType: hard
+
 "@ampproject/remapping@npm:^2.0.0":
   version: 2.1.1
   resolution: "@ampproject/remapping@npm:2.1.1"
@@ -1891,6 +1898,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/reactivity@npm:~3.1.1":
+  version: 3.1.5
+  resolution: "@vue/reactivity@npm:3.1.5"
+  dependencies:
+    "@vue/shared": 3.1.5
+  checksum: 045103ae77f32b02e0d3d0b3b2503388e0282f07d1bdabff5a2dc01db05d0ff8b259069c17c060124658933146e47e6c7c8155e4923f1c0cf045e1e29e29c592
+  languageName: node
+  linkType: hard
+
+"@vue/shared@npm:3.1.5":
+  version: 3.1.5
+  resolution: "@vue/shared@npm:3.1.5"
+  checksum: 1f4395e246942486a50f0f9ba3955d81012753104d015b3be62797ed723aa39b62453ba6c50ae189fcab64945a53354e5f255613b3bb7c1a0f5261374d5e11f4
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.11.1":
   version: 1.11.1
   resolution: "@webassemblyjs/ast@npm:1.11.1"
@@ -2221,6 +2244,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"alpinejs@npm:^3.9.0":
+  version: 3.9.0
+  resolution: "alpinejs@npm:3.9.0"
+  dependencies:
+    "@vue/reactivity": ~3.1.1
+  checksum: 6ece3b07330e78944d8cca8ef0536e681017a238d3084a47c0d5d93156e3f9bc1affed518799b23131fba58961f4bd3192676d2400704de1b3f265379f068548
+  languageName: node
+  linkType: hard
+
 "ansi-html-community@npm:^0.0.8":
   version: 0.0.8
   resolution: "ansi-html-community@npm:0.0.8"
@@ -7083,6 +7115,7 @@ fsevents@~2.3.2:
   version: 0.0.0-use.local
   resolution: "root-workspace-0b6124@workspace:."
   dependencies:
+    "@alpinejs/morph": ^3.9.0
     "@babel/cli": ^7.16.8
     "@babel/eslint-parser": ^7.16.5
     "@babel/plugin-proposal-decorators": ^7.16.7
@@ -7099,6 +7132,7 @@ fsevents@~2.3.2:
     "@rails/webpacker": =6.0.0-rc.6
     "@ruffle-rs/ruffle": 0.1.0-nightly.2022.1.31
     "@webpack-cli/serve": ^1.6.0
+    alpinejs: ^3.9.0
     core-js: ^3.20.3
     css-loader: ^6.5.1
     dropzone: ^6.0.0-beta.2