add comments on entries

2026-01-23 21:55:54 +01:00
parent b3726e0777
commit 9a814f1aa1
15 changed files with 270 additions and 2 deletions
@@ -0,0 +1,57 @@
+<% if current_user %>
+<div class="mt-8" data-controller="comments">
+  <div class="flex items-center justify-between mb-4">
+    <h3 class="text-lg font-bold text-slate-900">Discussion</h3>
+    <button id="add_comment_button" data-action="click->comments#open" data-comments-target="button" class="bg-indigo-600 text-white px-4 py-2 rounded-full shadow hover:bg-indigo-700 transition text-sm font-semibold">
+      Add Comment
+    </button>
+  </div>
+
+  <%= render "entries/comment_tabs", entry: entry %>
+
+  <div id="comment_form_modal" data-comments-target="modal" data-action="click->comments#close" class="hidden fixed inset-0 bg-slate-900 bg-opacity-50 z-40 flex items-center justify-center">
+    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-lg">
+      <div class="flex justify-between items-center">
+        <h4 class="text-lg font-bold">Add a Comment</h4>
+        <button id="close_comment_form" data-action="click->comments#closeWithButton" class="text-slate-500 hover:text-slate-700 text-2xl leading-none">
+          &times;
+        </button>
+      </div>
+      <%= render "entries/comment_form", entry: entry %>
+    </div>
+  </div>
+</div>
+
+<script>
+  function activateCommentTab(targetLanguageCode) {
+    const commentGroups = document.querySelectorAll(".comment-group");
+    commentGroups.forEach((group) => {
+      const isTarget = group.id === `comments-${targetLanguageCode}`;
+      group.classList.toggle("hidden", !isTarget);
+    });
+
+    const tabs = document.querySelectorAll(".comment-tab");
+    tabs.forEach((tab) => {
+      const isActive = tab.dataset.lang === targetLanguageCode;
+      tab.classList.toggle("text-slate-900", isActive);
+      tab.classList.toggle("border-indigo-600", isActive);
+      tab.classList.toggle("text-slate-500", !isActive);
+      tab.classList.toggle("border-transparent", !isActive);
+    });
+  }
+
+  document.addEventListener("click", (event) => {
+    const tab = event.target.closest(".comment-tab");
+    if (!tab) {
+      return;
+    }
+
+    event.preventDefault();
+    activateCommentTab(tab.dataset.lang);
+  });
+
+  document.addEventListener("turbo:load", () => {
+    activateCommentTab("all");
+  });
+</script>
+<% end %>