refactor: move comment toggle script to modular partial

1 files changed, 31 insertions, 0 deletions

diff --git a/layouts/_partials/posts/action-menu/comment-button.html b/layouts/_partials/posts/action-menu/comment-button.html
index bc079a4f..563bf4bd 100644
--- a/layouts/_partials/posts/action-menu/comment-button.html
+++ b/layouts/_partials/posts/action-menu/comment-button.html
@@ -1,3 +1,4 @@
+{{ /* button html */}}
 <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
     id="comments-toggle" title="{{ T "actionMenu.comment" }}" data-tooltip>
   <img src="/img/comments.svg" width="20" height="20"
@@ -5,3 +6,33 @@
       class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
   <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="comment-count">...</span>
 </button>
+
+{{ /* button functionality */}}
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const commentsToggle = document.getElementById('comments-toggle');
+  const commentsSection = document.getElementById('comments-section');
+
+  if (!commentsToggle || !commentsSection) return;
+
+  // click on toggle
+  commentsToggle.addEventListener('click', function() {
+    const isHidden = commentsSection.classList.contains('hidden');
+    const entranceAnimation = 'animate-slide-in-down';
+    const exitAnimation = 'animate-slide-out-up';
+
+    if (isHidden) {
+      // swtich on
+      commentsSection.classList.remove('hidden', exitAnimation);
+      commentsSection.classList.add(entranceAnimation);
+    } else {
+      // switch off
+      commentsSection.classList.remove(entranceAnimation);
+      commentsSection.classList.add(exitAnimation);
+      setTimeout(() => {
+        commentsSection.classList.add('hidden');
+      }, 200);
+    }
+  });
+});
+</script>