comments: add dtext shortlink option to comment menu.

Add a Shortlink menu option to the comment menu. Clicking this will copy
a DText comment shortlink (e.g. `comment #12345`) to the clipboard. You
can middle-click or right-click the menu option to get the full URL.

The menu option is called Shortlink instead of `comment #1234` because
show the full comment ID in the menu makes the menu look too unbalanced.

Note that the `navigator.clipboard` API can only be used in a https://
environment. It won't work in non-HTTPS development environments. ngrok
can help with this.

app/components/comment_component.rb

@@ -2,7 +2,7 @@
 
 class CommentComponent < ApplicationComponent
   attr_reader :comment, :context, :dtext_data, :current_user
-  delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, to: :helpers
+  delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, :link_icon, to: :helpers
 
   def initialize(comment:, current_user:, context: nil, dtext_data: nil)
     @comment = comment

app/components/comment_component/comment_component.html.erb

@@ -83,36 +83,41 @@
         </li>
       <% end %>
 
-      <% if policy(comment).update? || policy(comment).reportable? %>
+      <%= render PopupMenuComponent.new do |menu| %>
-        <%= render PopupMenuComponent.new do |menu| %>
+        <% if policy(comment).update? %>
-          <% if policy(comment).update? %>
+          <%= menu.item do %>
-            <%= menu.item do %>
+            <%= link_to edit_comment_path(comment.id), id: "edit_comment_link_#{comment.id}", class: "edit_comment_link" do %>
-              <%= link_to edit_comment_path(comment.id), id: "edit_comment_link_#{comment.id}", class: "edit_comment_link" do %>
+              <%= edit_icon %> Edit
-                <%= edit_icon %> Edit
-              <% end %>
-            <% end %>
-
-            <%= menu.item do %>
-              <% if comment.is_deleted? %>
-                <%= link_to undelete_comment_path(comment.id), method: :post, remote: true do %>
-                  <%= undelete_icon %> Undelete
-                <% end %>
-              <% else %>
-                <%= link_to comment_path(comment.id), "data-confirm": "Are you sure you want to delete this comment?", method: :delete, remote: true do %>
-                  <%= delete_icon %> Delete
-                <% end %>
-              <% end %>
             <% end %>
           <% end %>
 
-          <% if policy(comment).reportable? %>
+          <%= menu.item do %>
-            <%= menu.item do %>
+            <% if comment.is_deleted? %>
-              <%= link_to new_moderation_report_path(moderation_report: { model_type: "Comment", model_id: comment.id }), remote: true do %>
+              <%= link_to undelete_comment_path(comment.id), method: :post, remote: true do %>
-                <%= flag_icon %> Report
+                <%= undelete_icon %> Undelete
+              <% end %>
+            <% else %>
+              <%= link_to comment_path(comment.id), "data-confirm": "Are you sure you want to delete this comment?", method: :delete, remote: true do %>
+                <%= delete_icon %> Delete
               <% end %>
             <% end %>
           <% end %>
         <% end %>
+
+        <% if policy(comment).reportable? %>
+          <%= menu.item do %>
+            <%= link_to new_moderation_report_path(moderation_report: { model_type: "Comment", model_id: comment.id }), remote: true do %>
+              <%= flag_icon %> Report
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <%= menu.item do %>
+          <%= link_to comment_path(comment.id), class: "comment-copy-link" do %>
+            <%= link_icon %> Shortlink
+          <% end %>
+        <% end %>
+
       <% end %>
     </menu>
 

app/components/comment_component/comment_component.js

@@ -1,9 +1,12 @@
+import Utility from "../../javascript/src/javascripts/utility.js";
+
 class CommentComponent {
   static initialize() {
     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-link", CommentComponent.copyLink);
     }
   }
 
@@ -26,8 +29,20 @@ class CommentComponent {
     $comment.find(".body").show();
     e.preventDefault();
   }
-}
 
+  static async copyLink(e) {
+    let $comment = $(this).closest(".comment");
+    let link = `comment #${$comment.data("id")}`;
+    e.preventDefault();
+
+    try {
+      await navigator.clipboard.writeText(link);
+      Utility.notice(`Copied ${link} to clipboard.`);
+    } catch (error) {
+      Utility.error("Couldn't copy link to clipboard");
+    }
+  }
+}
 
 $(document).ready(CommentComponent.initialize);
 

app/helpers/icon_helper.rb

@@ -135,4 +135,8 @@ module IconHelper
   def flag_icon(**options)
     icon_tag("fas fa-flag", **options)
   end
+
+  def link_icon(**options)
+    icon_tag("fas fa-link", **options)
+  end
 end