From 4eece69fb818416ccf2afe5ffc699ccc7dfd3eda Mon Sep 17 00:00:00 2001
From: Yufan Sheng <syhily@gmail.com>
Date: Mon, 17 Jun 2024 03:46:20 +0800
Subject: [PATCH] chore: better style for replying the root comments.

---
 src/asserts/scripts/yufan.me.js          | 25 ++++++++++++++++++++++--
 src/components/comment/CommentItem.astro |  2 +-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/asserts/scripts/yufan.me.js b/src/asserts/scripts/yufan.me.js
index eb72487..1bb5519 100644
--- a/src/asserts/scripts/yufan.me.js
+++ b/src/asserts/scripts/yufan.me.js
@@ -92,12 +92,23 @@ if (typeof comments !== 'undefined' && comments !== null) {
   const replyForm = comments.querySelector('#respond');
   const cancelReply = () => {
     cancel.hidden = true;
-    replyForm.querySelector('input[name="rid"]').value = '0';
     replyForm.querySelector('textarea[name="content"]').value = '';
 
     // Move the form back to top.
     const commentCount = comments.querySelector('.comment-total-count');
     commentCount.after(replyForm);
+
+    // Get rid to clean up the children form.
+    const ridInput = replyForm.querySelector('input[name="rid"]');
+    const rid = ridInput.value;
+    ridInput.value = '0';
+    if (rid !== '0') {
+      console.log({ rid: rid });
+      const children = comments.querySelector(`#atk-comment-${rid}`).querySelector('.children');
+      if (children !== null && children.querySelectorAll('li').length === 0) {
+        children.remove();
+      }
+    }
   };
 
   // TODO: Load the commenter information from the cookie.
@@ -147,7 +158,17 @@ if (typeof comments !== 'undefined' && comments !== null) {
 
       // Move form to the reply.
       const commentItem = event.target.closest('li');
-      commentItem.after(replyForm);
+      if (commentItem.dataset.depth === '1') {
+        if (commentItem.querySelector('ul.children') === null) {
+          // Create this for better architecture.
+          commentItem.insertAdjacentHTML('beforeend', '<ul class="children"></ul>');
+        }
+        commentItem.querySelector('ul.children').appendChild(replyForm);
+      } else {
+        commentItem.after(replyForm);
+      }
+
+      // Focus the comment form.
       replyForm.querySelector('#content').focus();
     }
 
diff --git a/src/components/comment/CommentItem.astro b/src/components/comment/CommentItem.astro
index 4318972..76dcbb1 100644
--- a/src/components/comment/CommentItem.astro
+++ b/src/components/comment/CommentItem.astro
@@ -13,7 +13,7 @@ interface Props {
 const { comment, config, depth, pending } = Astro.props;
 ---
 
-<li id={`atk-comment-${comment.id}`} class={`comment odd alt thread-odd thread-alt depth-${depth}`}>
+<li id={`atk-comment-${comment.id}`} class="comment odd alt thread-odd thread-alt" data-depth={depth}>
   <article id={`div-comment-${comment.id}`} class="comment-body">
     <div class="comment-avatar flex-avatar">
       <img