2 files changed, 90 insertions, 4 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 442af67..2fee7bf 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -368,6 +368,25 @@ hr {
     font-size: 8px
 }
 
+.reply-button {
+    background: #eee;
+    border: 1px solid #ccc;
+    color: #666;
+    cursor: pointer;
+    font-size: 8px;
+    padding: 2px 6px;
+    border-radius: 3px;
+    text-transform: uppercase;
+    font-family: inherit;
+    margin-right: 5px
+}
+
+.reply-button:hover {
+    background: #e0e0e0;
+    color: #333;
+    border-color: #999
+}
+
 .reaction {
     background: #eee;
     border: 1px solid #ccc;
@@ -468,6 +487,30 @@ hr {
     color: #999
 }
 
+#reply-preview-area {
+    padding: 10px;
+    background: #fcfcfc;
+    border: 1px dashed #ccc;
+    margin-bottom: 15px;
+}
+
+#reply-preview-area .comment-block {
+    margin-bottom: 0;
+    border-right: 1px solid #eee; /* Visual hint it's a preview */
+}
+
+#cancel-reply {
+    background: #333;
+    color: #fff;
+    border: none;
+    padding: 2px 5px;
+    text-transform: uppercase;
+}
+
+#cancel-reply:hover {
+    background: #cc0000;
+}
+
 .legacy-warning {
     background: linear-gradient(to bottom,#fff3e0 0,#ffe0b2 100%);
     border: 1px dotted #fb8c00;
diff --git a/static/js/dynamic-comment-form.js b/static/js/dynamic-comment-form.js
index 809a755..75e2fb6 100644
--- a/static/js/dynamic-comment-form.js
+++ b/static/js/dynamic-comment-form.js
@@ -81,12 +81,55 @@ 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");
+  const replyToField = document.getElementById("reply-to");
+  const commentFormModule = document.querySelector('.comment-form-module');
+
+  // Create a "Replying To" preview container dynamically
+  const previewContainer = document.createElement('div');
+  previewContainer.id = 'reply-preview-area';
+  previewContainer.style.display = 'none';
+  commentFormModule.prepend(previewContainer);
+
+  const replyButtons = document.querySelectorAll(".reply-button");
+  for (const button of replyButtons) {
+    button.removeAttribute("hidden");
+    button.addEventListener('click', (e) => {
+      replyTo.value = button.getAttribute("data-reply-to-id");
+      const targetId = button.getAttribute('data-target');
+      const originalComment = document.getElementById(targetId);
+
+      if (originalComment) {
+        const clone = originalComment.cloneNode(true);
+        const nestedReplies = clone.querySelectorAll('.reply');
+        nestedReplies.forEach(reply => reply.remove());
+        const actionButtons = clone.querySelector('.comment-reactions');
+        if (actionButtons) actionButtons.remove();
+        previewContainer.innerHTML = `
+<div>
+  <strong>You are replying to this comment:</strong>
+  <button id="cancel-reply" style="margin-left: auto; cursor: pointer; font-size: 8px;">Cancel Reply</button>
+</div>
+<div class="reply-preview-content" style="opacity: 0.8; scale: 0.95; origin: top left;">
+    ${clone.outerHTML}
+</div>
+`;
+        previewContainer.style.display = 'block';
+        commentFormModule.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        document.getElementById('cancel-reply').addEventListener('click', () => {
+          replyTo.value = "";
+          previewContainer.style.display = 'none';
+          previewContainer.innerHTML = '';
+        });
+      }
+    })
   }
 
+  document.addEventListener('click', (e) => {
+    if (e.target.classList.contains('reply-button')) {
+
+    }
+  });
+
   let header = document.getElementById("comment-form-header");
   let replyTo = document.getElementById("reply-to");
   let buttons = document.querySelectorAll(".comment-reply-button");