From 46e4f808e735cfb040c6ebb8534b34189d14b0cc Mon Sep 17 00:00:00 2001
From: Runar Ingebrigtsen <runar@rin.no>
Date: Fri, 30 Jan 2026 10:37:56 +0100
Subject: [PATCH] refactor comments, select language

---
 .../controllers/comments_controller.js        | 27 ++++++++++++--
 app/views/comments/create.turbo_stream.erb    | 16 +++++---
 app/views/entries/_comment_form.html.erb      | 25 ++++++++++---
 .../entries/_comment_modal_content.html.erb   |  9 +++++
 app/views/entries/_comments_section.html.erb  | 14 ++-----
 app/views/entries/_form_fields.html.erb       |  7 +++-
 .../_language_comment_details.html.erb        |  8 ----
 app/views/entries/edit.html.erb               | 37 +------------------
 app/views/entries/show.html.erb               | 14 ++++---
 9 files changed, 82 insertions(+), 75 deletions(-)
 create mode 100644 app/views/entries/_comment_modal_content.html.erb
 delete mode 100644 app/views/entries/_language_comment_details.html.erb

diff --git a/app/javascript/controllers/comments_controller.js b/app/javascript/controllers/comments_controller.js
index 73b8d44..24fe6c6 100644
--- a/app/javascript/controllers/comments_controller.js
+++ b/app/javascript/controllers/comments_controller.js
@@ -1,25 +1,46 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["modal", "button"]
+  static targets = ["modal", "languageSelect", "form"]
 
   connect() {
     this.modalTarget.classList.add("hidden")
-    this.buttonTarget.classList.remove("hidden")
   }
 
   open(event) {
     event.preventDefault()
+
+    // Get the language code from the button that was clicked
+    const languageCode = event.currentTarget.dataset.languageCode
+
+    // Set the language select value if provided
+    if (languageCode && this.hasLanguageSelectTarget) {
+      this.languageSelectTarget.value = languageCode
+    }
+
     this.modalTarget.classList.remove("hidden")
   }
 
   close(event) {
     if (event.target === this.modalTarget) {
       this.modalTarget.classList.add("hidden")
+      this.resetForm()
     }
   }
 
-  closeWithButton() {
+  closeWithButton(event) {
+    event.preventDefault()
     this.modalTarget.classList.add("hidden")
+    this.resetForm()
+  }
+
+  stopPropagation(event) {
+    event.stopPropagation()
+  }
+
+  resetForm() {
+    if (this.hasFormTarget) {
+      this.formTarget.reset()
+    }
   }
 }
diff --git a/app/views/comments/create.turbo_stream.erb b/app/views/comments/create.turbo_stream.erb
index a3bacc3..5f43e0e 100644
--- a/app/views/comments/create.turbo_stream.erb
+++ b/app/views/comments/create.turbo_stream.erb
@@ -2,12 +2,16 @@
   <%= 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 %>
+
+<%= turbo_stream.update "comment_form_modal" do %>
+  <%= render "entries/comment_modal_content", entry: @commentable %>
+<% end %>
+
+<%= turbo_stream.append "comment_form_modal", target: "comment_form_modal" do %>
+  <script>
+    document.getElementById('comment_form_modal').classList.add('hidden');
+  </script>
+<% end %>
diff --git a/app/views/entries/_comment_form.html.erb b/app/views/entries/_comment_form.html.erb
index e1864c2..518687e 100644
--- a/app/views/entries/_comment_form.html.erb
+++ b/app/views/entries/_comment_form.html.erb
@@ -1,12 +1,27 @@
 <%= form_with(model: [entry, Comment.new(commentable: entry)],
-              data: { turbo_stream: true },
+              data: { turbo_stream: true, comments_target: "form" },
               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..." %>
+    <%= form.label :language_code, "Language", class: "block text-sm font-medium text-slate-700 mb-2" %>
+    <%= form.select :language_code,
+                    options_for_select(
+                      [["All languages", nil]] + supported_languages.map { |lang| ["#{lang.name} (#{lang.code.upcase})", lang.code] },
+                      local_assigns[:language_code].presence
+                    ),
+                    {},
+                    {
+                      data: { comments_target: "languageSelect" },
+                      class: "block w-full px-3 py-2 border border-slate-300 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm"
+                    } %>
   </div>
-  <div class="flex justify-end">
+  <div>
+    <%= form.label :body, "Comment", class: "block text-sm font-medium text-slate-700 mb-2" %>
+    <%= form.text_area :body, rows: 4, class: "block w-full border-slate-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Add your comment..." %>
+  </div>
+  <div class="flex justify-end gap-2">
+    <button type="button" data-action="click->comments#closeWithButton" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-900 transition">
+      Cancel
+    </button>
     <%= 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 %>
diff --git a/app/views/entries/_comment_modal_content.html.erb b/app/views/entries/_comment_modal_content.html.erb
new file mode 100644
index 0000000..f70914b
--- /dev/null
+++ b/app/views/entries/_comment_modal_content.html.erb
@@ -0,0 +1,9 @@
+<div data-action="click->comments#stopPropagation" class="bg-white rounded-lg shadow-xl p-6 w-full max-w-lg">
+  <div class="flex justify-between items-center mb-4">
+    <h4 class="text-lg font-bold">Add a Comment</h4>
+    <button 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>
diff --git a/app/views/entries/_comments_section.html.erb b/app/views/entries/_comments_section.html.erb
index 3f8003d..9682b26 100644
--- a/app/views/entries/_comments_section.html.erb
+++ b/app/views/entries/_comments_section.html.erb
@@ -1,8 +1,8 @@
 <% if current_user %>
-<div class="mt-8" data-controller="comments">
+<div class="mt-8">
   <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">
+    <button data-action="click->comments#open" 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>
@@ -10,15 +10,7 @@
   <%= 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>
+    <%= render "entries/comment_modal_content", entry: entry %>
   </div>
 </div>
 
diff --git a/app/views/entries/_form_fields.html.erb b/app/views/entries/_form_fields.html.erb
index 7073af4..45045af 100644
--- a/app/views/entries/_form_fields.html.erb
+++ b/app/views/entries/_form_fields.html.erb
@@ -2,15 +2,20 @@
   # - f: form builder object
   # - show_category: boolean (default: true) - whether to show category field
   # - show_notes: boolean (default: true) - whether to show notes field
+  # - category_prompt: string or false (default: "Select a category") - prompt for category select, or false for no prompt
 %>
 
 <% show_category = local_assigns.fetch(:show_category, true) %>
 <% show_notes = local_assigns.fetch(:show_notes, true) %>
+<% category_prompt = local_assigns.fetch(:category_prompt, "Select a category") %>
 
 <% if show_category %>
   <div>
     <%= f.label :category, "Category", class: "block text-sm font-semibold text-gray-700 mb-2" %>
-    <%= f.select :category, Entry.categories.keys.map { |cat| [cat.humanize, cat] }, { prompt: "Select a category" }, { required: true, class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" } %>
+    <%= f.select :category,
+                 Entry.categories.keys.map { |cat| [cat.humanize, cat] },
+                 category_prompt ? { prompt: category_prompt } : {},
+                 { required: category_prompt.present?, class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" } %>
   </div>
 <% end %>
 
diff --git a/app/views/entries/_language_comment_details.html.erb b/app/views/entries/_language_comment_details.html.erb
deleted file mode 100644
index ea99160..0000000
--- a/app/views/entries/_language_comment_details.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<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>
diff --git a/app/views/entries/edit.html.erb b/app/views/entries/edit.html.erb
index e03004c..02cfd5c 100644
--- a/app/views/entries/edit.html.erb
+++ b/app/views/entries/edit.html.erb
@@ -33,41 +33,8 @@
             </div>
           <% end %>
 
-          <div class="space-y-4">
-            <div>
-              <%= f.label :category, "Category", class: "block text-sm font-semibold text-gray-700 mb-2" %>
-              <%= f.select :category,
-                          Entry.categories.keys.map { |key| [key.tr("_", " ").capitalize, key] },
-                          {},
-                          { class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" } %>
-            </div>
-          </div>
-
-          <div class="border-t border-gray-200 pt-6">
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">Translations (at least one required)</h3>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <% %w[fi en sv no ru de].each do |lang_code| %>
-                <div>
-                  <%= f.label lang_code.to_sym,
-                      case lang_code
-                      when 'fi' then '🇫🇮 Finnish'
-                      when 'en' then '🇬🇧 English'
-                      when 'sv' then '🇸🇪 Swedish'
-                      when 'no' then '🇳🇴 Norwegian'
-                      when 'ru' then '🇷🇺 Russian'
-                      when 'de' then '🇩🇪 German'
-                      end,
-                      class: "block text-sm font-medium text-gray-700 mb-2" %>
-                  <%= f.text_field lang_code.to_sym,
-                      class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" %>
-                </div>
-              <% end %>
-            </div>
-          </div>
-
-          <div>
-            <%= f.label :notes, "Additional Notes (optional)", class: "block text-sm font-semibold text-gray-700 mb-2" %>
-            <%= f.text_area :notes, rows: 4, class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition", placeholder: "Any additional context or information about this entry..." %>
+          <div class="space-y-6">
+            <%= render 'entries/form_fields', f: f, category_prompt: false %>
           </div>
 
           <div class="flex flex-col sm:flex-row gap-4 pt-4">
diff --git a/app/views/entries/show.html.erb b/app/views/entries/show.html.erb
index c3a6216..63ff525 100644
--- a/app/views/entries/show.html.erb
+++ b/app/views/entries/show.html.erb
@@ -13,7 +13,7 @@
   </div>
 </nav>
 
-<main class="max-w-5xl mx-auto px-4 py-8 space-y-6">
+<main class="max-w-5xl mx-auto px-4 py-8 space-y-6" data-controller="comments">
   <div>
     <%= link_to "← Back to search", entries_path, class: "text-sm text-slate-500 hover:text-indigo-600" %>
   </div>
@@ -39,14 +39,16 @@
           <% next if translation.blank? %>
           <div class="space-y-2">
             <div class="grid grid-cols-2">
+              <div>
               <span class="text-[10px] font-bold text-slate-400 uppercase tracking-tight"><%= "#{language.name} (#{language.code.upcase})" %></span>
+              <% if current_user %>
+                <button data-action="click->comments#open" data-language-code="<%= language.code %>" class="text-[10px] ml-3 font-bold uppercase text-indigo-400 hover:text-indigo-600 transition">
+                  Add Comment
+                </button>
+              <% end %>
+              </div>
             </div>
             <p class="text-2xl font-semibold text-slate-800"><%= translation %></p>
-            <% if current_user %>
-              <div id="comment-details-<%= language.code %>">
-                <%= render "entries/language_comment_details", entry: @entry, language_code: language.code %>
-              </div>
-            <% end %>
           </div>
         <% end %>
       </div>