Added message perma links with copy button

Author: dutow

app/assets/stylesheets/components/messages.css

@@ -79,6 +79,35 @@
   color: var(--color-text-muted);
 }
 
+.message-number {
+  color: var(--color-text-link);
+  text-decoration: none;
+  font-weight: var(--font-weight-semibold);
+  margin-right: var(--spacing-2);
+}
+
+.message-number:hover {
+  text-decoration: underline;
+}
+
+.message-copy {
+  border: none;
+  background: none;
+  color: var(--color-text-link);
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+}
+
+.message-copy:hover {
+  text-decoration: underline;
+}
+
+.message-copy.copied {
+  color: var(--color-success);
+}
+
 .reply-indicator {
   color: var(--color-purple);
   font-style: italic;

app/javascript/controllers/clipboard_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Copies a provided URL to the clipboard.
+export default class extends Controller {
+  static values = { url: String }
+
+  async copy(event) {
+    event.preventDefault()
+    const text = this.urlValue
+    if (!text) return
+
+    try {
+      await navigator.clipboard.writeText(text)
+    } catch (_err) {
+      this.fallbackCopy(text)
+    }
+
+    this.showFeedback()
+  }
+
+  fallbackCopy(text) {
+    const textarea = document.createElement("textarea")
+    textarea.value = text
+    textarea.setAttribute("readonly", "")
+    textarea.style.position = "absolute"
+    textarea.style.left = "-9999px"
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand("copy")
+    textarea.remove()
+  }
+
+  showFeedback() {
+    this.element.classList.add("copied")
+    setTimeout(() => this.element.classList.remove("copied"), 1200)
+  }
+}

app/views/topics/_message.html.slim

@@ -12,7 +12,13 @@
   .message-header
     .message-author
       .author-row
-        span.message-number = "##{display_number}"
+        = link_to "##{display_number}", "#message-#{message.id}", class: "message-number"
+        = button_tag type: "button",
+                     class: "message-copy",
+                     data: { controller: "clipboard", action: "click->clipboard#copy", "clipboard-url-value": topic_url(@topic, anchor: "message-#{message.id}") },
+                     title: "Copy message link",
+                     "aria-label": "Copy message link" do
+          i.fa-regular.fa-copy
         = image_tag message.sender.gravatar_url(size: 42), class: "message-avatar", alt: message.sender.name
         .author-details
           .author-name = message.sender.name