[dynamic] Fix the "reply" button on comments

4 files changed, 25 insertions, 20 deletions

diff --git a/jakob/utils/comments.scm b/jakob/utils/comments.scm
index 4ec3718..966d2dc 100644
--- a/jakob/utils/comments.scm
+++ b/jakob/utils/comments.scm
@@ -148,10 +148,17 @@ The I2P logo belongs to The I2P Project, and is licensed under the CC BY 4.0")
                      `(li ,(format #f "~a (~a)" emote count))))
                   (comment-reactions comment)))
        ,(when (internal-comment? comment)
-          `(p (a (@ (class "comment-reply-button")
+          `(p (@ (class "comment-additional-actions")
+                 (hidden #t))
+              (a (@ (class "comment-reply-button")
                     (href "#webmention-form")
                     (data-reply-to-id ,(internal-comment-id comment)))
-                 "reply")))
+                 "reply")
+              " - "
+              (a (@ (class "comment-react-button")
+                    (href "#webmention-form")
+                    (data-reply-to-id ,(internal-comment-id comment)))
+                 "react")))
        ,(when (and (internal-comment? comment)
                    (positive? (length (internal-comment-replies comment))))
           `(ul (@ (class "webmention-container"))
diff --git a/pages/changelog.org b/pages/changelog.org
index 2591ca2..500c029 100644
--- a/pages/changelog.org
+++ b/pages/changelog.org
@@ -7,6 +7,7 @@ A record of any notable user-facing changes made to this website. For more detai
 ** Sunday, August 11, 2024
 
 - Added an indication that posting a comment was successful, instead of just redirecting to the index.
+- Fix the "reply to" button on comments.
 
 ** Sunday, December 24, 2023
 
diff --git a/static/js/comment-reaction.js b/static/js/comment-reaction.js
index 1002fa2..4536717 100644
--- a/static/js/comment-reaction.js
+++ b/static/js/comment-reaction.js
@@ -92,26 +92,17 @@ function selectorWidget(id) {
 
 // Add a "react" button to every local comment.
 window.addEventListener("load", () => {
-  // First pass to add a separator for the buttons.
-  let replyButtons = document.querySelectorAll(".comment-reply-button");
-  for (let button of replyButtons) {
-    let parent = button.parentNode;
-    parent.innerHTML += " - ";
-
+  // Unhide additional comment actions if Javascript is enabled.
+  let additionalActionsRows = document.querySelectorAll(".comment-additional-actions");
+  for (let row of additionalActionsRows) {
+    row.removeAttribute("hidden");
   }
 
-  // Second pass to add the actual "react" button.
-  replyButtons = document.querySelectorAll(".comment-reply-button");
-  for (let button of replyButtons) {
+  let reactButtons = document.querySelectorAll(".comment-react-button");
+  for (let button of reactButtons) {
     let id = button.getAttribute("data-reply-to-id");
-    let reactButton = document.createElement("a");
-    reactButton.setAttribute("class", "comment-react-button");
-    reactButton.setAttribute("href", "#");
-    reactButton.setAttribute("data-react-to-id", id);
-    reactButton.innerHTML = "react";
-    button.parentNode.appendChild(reactButton);
 
-    reactButton.addEventListener('click', (e) => {
+    button.addEventListener('click', (e) => {
       // If we already made a selector widget for this comment, let's "hide" the
       // one that exists.
       let existingSelectorWidget = document.getElementById(selectorWidgetName(id));
@@ -126,12 +117,12 @@ window.addEventListener("load", () => {
       for (let button of emojiPicker.children) {
         button.addEventListener('click', (e) => {
           postReaction({
-            "id": reactButton.getAttribute("data-react-to-id"),
+            "id": button.getAttribute("data-react-to-id"),
             "reaction": button.innerHTML
           }, () => {
             let reactAcknowledgement = document.createElement("span");
             reactAcknowledgement.innerHTML = "successfully reacted!"
-            reactButton.replaceWith(reactAcknowledgement);
+            button.replaceWith(reactAcknowledgement);
           });
           emojiPicker.remove();
         });
diff --git a/static/js/dynamic-comment-form.js b/static/js/dynamic-comment-form.js
index 4be2d52..ff5f875 100644
--- a/static/js/dynamic-comment-form.js
+++ b/static/js/dynamic-comment-form.js
@@ -82,6 +82,12 @@ window.addEventListener("load", () => {
 
 
 window.addEventListener("load", () => {
+  // Unhide additional comment actions if Javascript is enabled.
+  let additionalActionsRows = document.querySelectorAll(".comment-additional-actions");
+  for (let row of additionalActionsRows) {
+    row.removeAttribute("hidden");
+  }
+
   let header = document.getElementById("comment-form-header");
   let replyTo = document.getElementById("reply-to");
   let buttons = document.querySelectorAll(".comment-reply-button");