Two pane view with a turbo-frame

app/javascript/application.js

@@ -1,2 +1,4 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails"
 import "controllers"
+import "@hotwired/turbo-rails"

app/views/layouts/application.html.erb

@@ -34,7 +34,7 @@
       </div>
     </header>
 
-    <main class="container mx-auto px-4 py-8">
+    <main class="px-4 py-8">
       <%= yield %>
     </main>
   </body>

app/views/messages/_thread.html.erb

@@ -1,17 +1,17 @@
 <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 <% if message.children&.any? %>cursor-pointer<% end %>" <% if message.children&.any? %>data-action="click->thread#toggle"<% end %>>
+      <div class="p-5">
         <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">
+                <svg class="w-4 h-4 inline-block transition-transform cursor-pointer" data-thread-target="icon" data-action="click->thread#toggle" 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}", data: {action: 'click->thread#toggle:stop'} %>
+              <%= link_to without_list_prefix(message.subject), "/#{list.name}/#{message.list_seq}", data: {turbo_frame: 'message_content'} %>
               <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">
@@ -33,7 +33,7 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
         </svg>
         <div class="flex-1 min-w-0">
-          <%= link_to "/#{list.name}/#{message.list_seq}", class: "text-gray-900 dark:text-gray-100 hover:text-red-600 dark:hover:text-red-400 transition-colors" do %>
+          <%= link_to "/#{list.name}/#{message.list_seq}", class: 'text-gray-900 dark:text-gray-100 hover:text-red-600 dark:hover:text-red-400 transition-colors', data: {turbo_frame: 'message_content'} do %>
             <span class="px-0.5">[#<%= message.list_seq %>] <%= without_list_prefix(message.subject) %></span>
           <% end %>
           <span class="text-gray-500 dark:text-gray-400">— <%= message.from %></span>

app/views/messages/index.html.erb

@@ -6,11 +6,26 @@
   </div>
 <% end %>
 
-<div class="mb-8">
+<div class="mb-4">
   <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100"><%= @list.name %></h1>
   <p class="text-gray-600 dark:text-gray-400 mt-2">Mailing list archive</p>
 </div>
 
-<div class="space-y-6">
-  <%= render partial: 'thread', collection: @messages, as: :message, locals: {list: @list, depth: 0} %>
+<div class="grid grid-cols-4 gap-6" style="height: calc(100vh - 16rem);">
+  <div class="col-span-1 overflow-y-auto space-y-6">
+    <%= render partial: 'thread', collection: @messages, as: :message, locals: {list: @list, depth: 0} %>
+  </div>
+
+  <div class="col-span-3 overflow-y-auto">
+    <%= turbo_frame_tag "message_content", class: "block" do %>
+      <div class="flex items-center justify-center h-full text-gray-400 dark:text-gray-500">
+        <div class="text-center">
+          <svg class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+          </svg>
+          <p>Select a message to view</p>
+        </div>
+      </div>
+    <% end %>
+  </div>
 </div>

app/views/messages/show.html.erb

@@ -1,13 +1,11 @@
 <% content_for :title, @message.subject %>
 
-<% if notice %>
-  <div class="mb-4 p-4 bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200 rounded-lg">
-    <%= notice %>
-  </div>
-<% end %>
-
-<div class="mb-4">
-  <%= link_to "← Back to #{@message.list.name}", "/#{@message.list.name}/", class: "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 font-medium" %>
-</div>
+<%= turbo_frame_tag 'message_content' do %>
+  <% if notice %>
+    <div class="mb-4 p-4 bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200 rounded-lg">
+      <%= notice %>
+    </div>
+  <% end %>
 
-<%= render @message %>
+  <%= render @message %>
+<% end %>

config/importmap.rb

@@ -4,3 +4,4 @@
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "@hotwired/turbo-rails", to: "turbo.min.js"