From 3ceea77fe19ca33e7ef31d91d57ab2a6041d3bca Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Fri, 30 Jan 2026 23:54:42 -0500
Subject: [PATCH] Fix reply: dynamically add to DOM instead of page reload

---
 assets/js/ticket.js | 68 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 7 deletions(-)

diff --git a/assets/js/ticket.js b/assets/js/ticket.js
index 13355a0..dbbd415 100644
--- a/assets/js/ticket.js
+++ b/assets/js/ticket.js
@@ -1232,7 +1232,6 @@ document.addEventListener('DOMContentLoaded', function() {
         if (!target) return;
 
         const action = target.dataset.action;
-        console.log('Action clicked:', action, 'Target:', target);
         switch (action) {
             case 'remove-dependency':
                 removeDependency(target.dataset.dependencyId);
@@ -1464,13 +1463,10 @@ function deleteComment(commentId) {
  * Show reply form for a comment
  */
 function showReplyForm(commentId, userName) {
-    console.log('showReplyForm called:', commentId, userName);
-
     // Remove any existing reply forms
     document.querySelectorAll('.reply-form-container').forEach(form => form.remove());
 
     const commentDiv = document.querySelector(`.comment[data-comment-id="${commentId}"]`);
-    console.log('commentDiv found:', commentDiv);
     if (!commentDiv) return;
 
     const replyFormHtml = `
@@ -1549,10 +1545,68 @@ function submitReply(parentCommentId) {
             // Close the reply form
             closeReplyForm();
 
-            // Reload page to show the new threaded comment properly
-            // (Threading requires proper hierarchical rendering)
+            // Dynamically add the reply to the DOM
+            const parentComment = document.querySelector(`.comment[data-comment-id="${parentCommentId}"]`);
+            if (parentComment) {
+                // Get or create replies container
+                let repliesContainer = parentComment.querySelector('.comment-replies');
+                if (!repliesContainer) {
+                    repliesContainer = document.createElement('div');
+                    repliesContainer.className = 'comment-replies';
+                    parentComment.appendChild(repliesContainer);
+                }
+
+                // Get parent's thread depth
+                const parentDepth = parseInt(parentComment.dataset.threadDepth) || 0;
+                const newDepth = Math.min(parentDepth + 1, 3);
+
+                // Format the comment text for display
+                let displayText;
+                if (isMarkdownEnabled) {
+                    displayText = typeof parseMarkdown === 'function' ? parseMarkdown(commentText) : commentText;
+                } else {
+                    displayText = commentText
+                        .replace(/&/g, '&amp;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;')
+                        .replace(/"/g, '&quot;')
+                        .replace(/'/g, '&#39;')
+                        .replace(/\n/g, '<br>');
+                }
+
+                // Create the new reply element
+                const replyDiv = document.createElement('div');
+                replyDiv.className = `comment thread-depth-${newDepth} comment-reply`;
+                replyDiv.dataset.commentId = data.comment_id;
+                replyDiv.dataset.markdownEnabled = isMarkdownEnabled ? '1' : '0';
+                replyDiv.dataset.threadDepth = newDepth;
+                replyDiv.dataset.parentId = parentCommentId;
+
+                replyDiv.innerHTML = `
+                    <div class="thread-line"></div>
+                    <div class="comment-content">
+                        <div class="comment-header">
+                            <span class="comment-user">${data.user_name}</span>
+                            <span class="comment-date">${data.created_at}</span>
+                            <div class="comment-actions">
+                                ${newDepth < 3 ? `<button type="button" class="comment-action-btn reply-btn" data-action="reply-comment" data-comment-id="${data.comment_id}" data-user="${data.user_name}" title="Reply">↩</button>` : ''}
+                                <button type="button" class="comment-action-btn edit-btn" data-action="edit-comment" data-comment-id="${data.comment_id}" title="Edit">✏️</button>
+                                <button type="button" class="comment-action-btn delete-btn" data-action="delete-comment" data-comment-id="${data.comment_id}" title="Delete">🗑️</button>
+                            </div>
+                        </div>
+                        <div class="comment-text" id="comment-text-${data.comment_id}" ${isMarkdownEnabled ? 'data-markdown' : ''}>
+                            ${displayText}
+                        </div>
+                        <textarea class="comment-edit-raw" id="comment-raw-${data.comment_id}" style="display:none;">${commentText.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</textarea>
+                    </div>
+                `;
+
+                // Add animation
+                replyDiv.style.animation = 'fadeIn 0.3s ease';
+                repliesContainer.appendChild(replyDiv);
+            }
+
             showToast('Reply added successfully', 'success');
-            setTimeout(() => window.location.reload(), 500);
         } else {
             showToast(data.error || 'Failed to add reply', 'error');
         }