ruby · amatsuda · Oct 24, 2025 · Oct 24, 2025 · Oct 24, 2025 · Oct 24, 2025
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -1,3 +1,5 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
 //= link_tree ../builds
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -0,0 +1,2 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "controllers"
diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js
@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }
diff --git a/app/javascript/controllers/hello_controller.js b/app/javascript/controllers/hello_controller.js
@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.textContent = "Hello World!"
+  }
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -0,0 +1,4 @@
+// Import and register all your controllers from the importmap via controllers/**/*_controller
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)
diff --git a/app/javascript/controllers/thread_controller.js b/app/javascript/controllers/thread_controller.js
@@ -0,0 +1,24 @@
+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")
+      }
+    }
+  }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -22,6 +22,7 @@
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
 
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= javascript_importmap_tags %>
   </head>
 
   <body class="bg-gray-50 dark:bg-gray-900">

diff --git a/app/views/messages/_thread.html.erb b/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 %>

diff --git a/bin/importmap b/bin/importmap
@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"
diff --git a/config/importmap.rb b/config/importmap.rb
@@ -0,0 +1,6 @@
+# Pin npm packages by running ./bin/importmap
+
+pin "application"
+pin "@hotwired/stimulus", to: "stimulus.min.js"
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
+pin_all_from "app/javascript/controllers", under: "controllers"
diff --git a/config/initializers/backtrace_silencers.rb b/config/initializers/backtrace_silencers.rb
@@ -0,0 +1 @@
+Rails.backtrace_cleaner.remove_silencers!
diff --git a/vendor/javascript/.keep b/vendor/javascript/.keep
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
		import "controllers"