add comments on entries

app/controllers/comments_controller.rb

@@ -0,0 +1,31 @@
+class CommentsController < ApplicationController
+  before_action :require_login
+  before_action :set_commentable
+
+  def create
+    @comment = @commentable.comments.build(comment_params)
+    @comment.user = current_user
+
+    if @comment.save
+      respond_to do |format|
+        format.turbo_stream
+        format.html { redirect_to @commentable }
+      end
+    else
+      # Handle validation errors
+      redirect_to @commentable, alert: "Comment could not be created: #{@comment.errors.full_messages.to_sentence}"
+    end
+  end
+
+  private
+
+  def set_commentable
+    if params[:entry_id]
+      @commentable = Entry.find(params[:entry_id])
+    end
+  end
+
+  def comment_params
+    params.require(:comment).permit(:body, :language_code)
+  end
+end

app/javascript/controllers/comments_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["modal", "button"]
+
+  connect() {
+    this.modalTarget.classList.add("hidden")
+    this.buttonTarget.classList.remove("hidden")
+  }
+
+  open(event) {
+    event.preventDefault()
+    this.modalTarget.classList.remove("hidden")
+  }
+
+  close(event) {
+    if (event.target === this.modalTarget) {
+      this.modalTarget.classList.add("hidden")
+    }
+  }
+
+  closeWithButton() {
+    this.modalTarget.classList.add("hidden")
+  }
+}

app/models/comment.rb

@@ -1,6 +1,23 @@
 class Comment < ApplicationRecord
   belongs_to :user
   belongs_to :commentable, polymorphic: true
+  belongs_to :language,
+             class_name: "SupportedLanguage",
+             foreign_key: :language_code,
+             primary_key: :code,
+             optional: true
 
   validates :body, presence: true
+
+  after_create_commit :notify_users
+
+  private
+
+  def notify_users
+    return if language_code.blank?
+
+    # Placeholder for notification logic once we decide delivery channels.
+    users_to_notify = User.where(primary_language: language_code).where.not(id: user_id)
+    # puts "Notifying users: #{users_to_notify.pluck(:email).join(", ")}"
+  end
 end

app/views/comments/create.turbo_stream.erb

@@ -0,0 +1,13 @@
+<%= turbo_stream.append "comments-#{@comment.language_code.presence || 'all'}" do %>
+  <%= render "entries/comment", comment: @comment %>
+<% end %>
+
+<% if @comment.language_code.present? %>
+  <%= turbo_stream.replace "comment-details-#{@comment.language_code}" do %>
+    <%= render "entries/language_comment_details", entry: @commentable, language_code: @comment.language_code %>
+  <% end %>
+<% end %>
+
+<%= turbo_stream.replace "comment_tabs" do %>
+  <%= render "entries/comment_tabs", entry: @commentable %>
+<% end %>

app/views/entries/_comment.html.erb

@@ -0,0 +1,24 @@
+<div class="flex items-start space-x-4">
+  <div class="flex-shrink-0">
+    <%# Add user avatars here if you have them %>
+    <div class="h-10 w-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 font-bold">
+      <%= comment.user&.name&.first || 'A' %>
+    </div>
+  </div>
+  <div class="flex-1">
+    <div class="bg-slate-100 rounded-lg p-3">
+      <div class="flex items-center justify-between">
+        <p class="text-sm text-slate-900">
+          <span class="font-semibold "><%= comment.user&.name || "Anonymous" %></span>
+          <% unless comment.language_code.blank? %>
+            <span class="italic">on the <%= language_name(comment.language_code) %> translation</span>
+          <% end -%>
+        </p>
+        <p class="text-xs text-slate-500">
+        <%= comment.created_at ? "#{time_ago_in_words(comment.created_at)} ago" : "just now" %>
+        </p>
+      </div>
+      <p class="text-sm text-slate-800 mt-1"><%= comment.body %></p>
+    </div>
+  </div>
+</div>

app/views/entries/_comment_form.html.erb

@@ -0,0 +1,12 @@
+<%= form_with(model: [entry, Comment.new(commentable: entry)],
+              data: { turbo_stream: true },
+              html: { class: "space-y-4" }) do |form| %>
+  <%= form.hidden_field :language_code, value: (local_assigns[:language_code].presence || nil) %>
+  <div>
+    <%= form.label :body, "Comment", class: "sr-only" %>
+    <%= form.text_area :body, rows: 4, class: "block w-full border-slate-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Add your comment..." %>
+  </div>
+  <div class="flex justify-end">
+    <%= form.submit "Submit", class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition cursor-pointer" %>
+  </div>
+<% end %>

app/views/entries/_comment_tabs.html.erb

@@ -0,0 +1,30 @@
+<div id="comment_tabs" class="border-b border-slate-200">
+  <nav class="-mb-px flex space-x-6" aria-label="Tabs">
+    <% grouped_comments = entry.comments.group_by(&:language) %>
+    <% language_groups = supported_languages.map { |language| [language, grouped_comments[language] || []] } %>
+    <% language_groups.unshift([:all, entry.comments]) %>
+    <% language_groups.each do |language, comments| %>
+      <% language_label = language == :all ? "All languages" : language&.name %>
+      <% language_code = language == :all ? "all" : language&.code %>
+      <a href="#"
+         class="comment-tab border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+         data-lang="<%= language_code %>">
+        <%= language_label %> <span class="bg-slate-100 text-slate-600 ml-2 py-0.5 px-2.5 rounded-full text-xs font-medium"><%= comments.count %></span>
+      </a>
+    <% end %>
+  </nav>
+</div>
+
+<div class="mt-4">
+  <% if entry.comments.empty? %>
+    <p class="text-slate-500">No comments yet. Be the first to add one!</p>
+  <% end %>
+  <% language_groups.each do |language, comments| %>
+    <% language_code = language == :all ? "all" : language&.code %>
+    <div id="comments-<%= language_code %>" class="comment-group space-y-4 hidden">
+      <% comments.each do |comment| %>
+        <%= render "entries/comment", comment: comment %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

app/views/entries/_comments_section.html.erb

@@ -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 %>

app/views/entries/_language_comment_details.html.erb

@@ -0,0 +1,8 @@
+<details class="text-xs">
+  <summary class="inline-flex items-center gap-1 text-indigo-600 font-semibold cursor-pointer">
+    Add comment
+  </summary>
+  <div class="mt-3">
+    <%= render "entries/comment_form", entry: entry, language_code: language_code %>
+  </div>
+</details>

app/views/entries/show.html.erb

@@ -58,4 +58,6 @@
       <% end %>
     </div>
   </div>
+
+  <%= render "entries/comments_section", entry: @entry %>
 </main>

app/views/invitation_mailer/invite.html.erb

@@ -94,7 +94,7 @@
         The <strong>Sanasto Wiki</strong> let you search and compare, or download, translations across languages used all over the living Christianity.
       </p>
 
-      <p>You are invited to contribute to this work.</p>
+      <p>With a login account, you can contribute to this work.</p>
 
       <div class="info-box">
         <p style="margin: 0;"><strong>Your Account Details:</strong></p>