Fold threads initially, and toggle them on click

Author: amatsuda

app/javascript/controllers/thread_controller.js

@@ -2,6 +2,23 @@ import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="thread"
 export default class extends Controller {
+  static targets = ["children", "icon"]
+
   connect() {
+    // Initially hide children
+    if (this.hasChildrenTarget) {
+      this.childrenTarget.classList.add("hidden")
+    }
+  }
+
+  toggle() {
+    if (this.hasChildrenTarget) {
+      this.childrenTarget.classList.toggle("hidden")
+
+      // Rotate the icon
+      if (this.hasIconTarget) {
+        this.iconTarget.classList.toggle("rotate-90")
+      }
+    }
   }
 }

app/views/messages/_thread.html.erb

@@ -1,12 +1,17 @@
-<div class="thread-message" style="margin-left: <%= depth * 6 %>px;">
+<div class="thread-message" style="margin-left: <%= depth * 6 %>px;" <% if (depth == 0) && message.children&.any? %>data-controller="thread"<% end %>>
   <% if depth == 0 %>
     <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-lg transition-shadow">
-      <div class="p-5">
+      <div class="p-5 <% if message.children&.any? %>cursor-pointer<% end %>" <% if message.children&.any? %>data-action="click->thread#toggle"<% end %>>
         <div class="flex items-start justify-between gap-4">
           <div class="flex-1 min-w-0">
             <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 hover:text-red-600 dark:hover:text-red-400 transition-colors mb-2">
+              <% if message.children&.any? %>
+                <svg class="w-4 h-4 inline-block transition-transform" data-thread-target="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              <% end %>
               <span class="px-0.5">[#<%= message.list_seq %>]</span>
-              <%= link_to without_list_prefix(message.subject), "/#{list.name}/#{message.list_seq}" %>
+              <%= link_to without_list_prefix(message.subject), "/#{list.name}/#{message.list_seq}", data: {action: 'click->thread#toggle:stop'} %>
               <span class="text-sm text-gray-500 dark:text-gray-400 font-normal ml-2">— <%= message.from %></span>
             </h2>
             <div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
@@ -38,7 +43,7 @@
   <% end %>
 
   <% if message.children&.any? %>
-    <div class="mt-2">
+    <div class="mt-2" <% if depth == 0 %>data-thread-target="children"<% end %>>
       <%= render partial: 'thread', collection: message.children, as: :message, locals: {list: list, depth: depth + 1} %>
     </div>
   <% end %>