Enable Turbo Drive with morphing for Messages#{destroy,mark}

app/assets/javascripts/application.js

@@ -69,6 +69,10 @@ window.updateLinks = function (loc, zoom, layers, object) {
 };
 
 $(document).ready(function () {
+  // NB: Turns Turbo Drive off by default. Turbo Drive must be opt-in on a per-link and per-form basis
+  // See https://turbo.hotwired.dev/reference/drive#turbo.session.drive
+  Turbo.session.drive = false;
+
   var headerWidth = 0,
       compactWidth = 0;
 

app/assets/javascripts/messages.js

@@ -1,36 +1,16 @@
 $(document).ready(function () {
-  $(".inbox-mark-unread").on("ajax:success", function (event, data) {
-    updateHtml(data);
-    updateReadState(this, false);
+  $(".messages-table .destroy-message").on("turbo:submit-end", function (event) {
+    if (event.detail.success) {
+      event.target.dataset.isDestroyed = true;
+    }
   });
 
-  $(".inbox-mark-read").on("ajax:success", function (event, data) {
-    updateHtml(data);
-    updateReadState(this, true);
+  $(".messages-table .message-summary").on("turbo:before-morph-element", function (event) {
+    if ($(event.target).find("[data-is-destroyed]").length > 0) {
+      event.preventDefault(); // NB: prevent Turbo from morhping/removing this element
+      $(event.target).fadeOut(800, "linear", function () {
+        $(this).remove();
+      });
+    }
   });
-
-  $(".inbox-destroy").on("ajax:success", function (event, data) {
-    updateHtml(data);
-
-    $(this).closest("tr").fadeOut(800, "linear", function () {
-      $(this).remove();
-    });
-  });
-
-  function updateHtml(data) {
-    $("#inboxanchor").remove();
-    $(".user-button").before(data.inboxanchor);
-
-    $("#inbox-count").replaceWith(data.inbox_count);
-    $("#outbox-count").replaceWith(data.outbox_count);
-    $("#muted-count").replaceWith(data.muted_count);
-  }
-
-  function updateReadState(target, isRead) {
-    $(target).closest("tr")
-      .toggleClass("inbox-row", isRead)
-      .toggleClass("inbox-row-unread", !isRead)
-      .find(".inbox-mark-unread").prop("hidden", !isRead).end()
-      .find(".inbox-mark-read").prop("hidden", isRead);
-  }
 });

app/controllers/messages_controller.rb

@@ -60,12 +60,12 @@ class MessagesController < ApplicationController
     @message = Message.where(:recipient => current_user).or(Message.where(:sender => current_user.id)).find(params[:id])
     @message.from_user_visible = false if @message.sender == current_user
     @message.to_user_visible = false if @message.recipient == current_user
-    if @message.save && !request.xhr?
+    if @message.save
       flash[:notice] = t ".destroyed"
 
       referer = safe_referer(params[:referer]) if params[:referer]
 
-      redirect_to referer || { :action => :inbox }
+      redirect_to referer || { :action => :inbox }, :status => :see_other
     end
   rescue ActiveRecord::RecordNotFound
     @title = t "messages.no_such_message.title"
@@ -125,9 +125,9 @@ class MessagesController < ApplicationController
       notice = t ".as_read"
     end
     @message.message_read = message_read
-    if @message.save && !request.xhr?
+    if @message.save
       flash[:notice] = notice
-      redirect_to :action => :inbox
+      redirect_back_or_to inbox_messages_path, :status => :see_other
     end
   rescue ActiveRecord::RecordNotFound
     @title = t "messages.no_such_message.title"

app/views/layouts/_head.html.erb

@@ -2,6 +2,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <%= javascript_include_tag "es6" unless browser.es6? %>
+  <%= javascript_include_tag "turbo", :type => "module" %>
   <%= javascript_include_tag "application" %>
   <%= javascript_include_tag "i18n/#{I18n.locale}" %>
   <%= stylesheet_link_tag "screen-#{dir}", :media => "screen" %>

app/views/layouts/_meta.html.erb

@@ -13,6 +13,8 @@
 <%= tag.meta :name => "msapplication-TileColor", :content => "#00a300" %>
 <%= tag.meta :name => "msapplication-TileImage", :content => image_path("mstile-144x144.png") %>
 <%= tag.meta :name => "theme-color", :content => "#ffffff" %>
+<%= turbo_refresh_method_tag :morph %>
+<%= turbo_refresh_scroll_tag :preserve %>
 <%= canonical_tag %>
 <% if Settings.key?(:publisher_url) -%>
 <%= tag.link :rel => "publisher", :href => Settings.publisher_url %>

app/views/messages/_message_summary.html.erb

@@ -1,13 +1,13 @@
-<tr id="inbox-<%= message.id %>" class="inbox-row<%= "-unread" unless message.message_read? %>">
-  <td><%= link_to message.sender.display_name, message.sender %></td>
-  <td><%= link_to message.title, message %></td>
+<tr id="inbox-<%= message.id %>" class="message-summary inbox-row<%= "-unread" unless message.message_read? %>">
+  <td><%= link_to message.sender.display_name, user_path(message.sender) %></td>
+  <td><%= link_to message.title, message_path(message) %></td>
   <td class="text-nowrap"><%= l message.sent_on, :format => :friendly %></td>
   <td class="text-nowrap d-flex justify-content-end gap-1">
-    <%= button_to t(".unread_button"), message_mark_path(message, :mark => "unread"), :remote => true, :class => "btn btn-sm btn-primary", :form => { :class => "inbox-mark-unread", :hidden => !message.message_read? } %>
-    <%= button_to t(".read_button"), message_mark_path(message, :mark => "read"), :remote => true, :class => "btn btn-sm btn-primary", :form => { :class => "inbox-mark-read", :hidden => message.message_read? } %>
-    <%= button_to t(".destroy_button"), message_path(message, :referer => request.fullpath), :method => :delete, :remote => true, :class => "btn btn-sm btn-danger", :form_class => "inbox-destroy" %>
+    <%= button_to t(".unread_button"), message_mark_path(message, :mark => "unread"), :class => "btn btn-sm btn-primary", :form => { :"data-turbo" => true, :class => "inbox-mark-unread", :hidden => !message.message_read? } %>
+    <%= button_to t(".read_button"), message_mark_path(message, :mark => "read"), :class => "btn btn-sm btn-primary", :form => { :"data-turbo" => true, :class => "inbox-mark-read", :hidden => message.message_read? } %>
+    <%= button_to t(".destroy_button"), message_path(message, :referer => request.fullpath), :method => :delete, :class => "btn btn-sm btn-danger", :form => { :"data-turbo" => true, :class => "destroy-message" } %>
     <% if message.muted? %>
-      <%= button_to t(".unmute_button"), message_unmute_path(message), :method => :patch, :class => "btn btn-sm btn-secondary" %>
+      <%= button_to t(".unmute_button"), message_unmute_path(message), :method => :patch, :class => "btn btn-sm btn-secondary", :form => { :"data-turbo" => true } %>
     <% end %>
   </td>
 </tr>

app/views/messages/_messages_table.html.erb

@@ -1,4 +1,4 @@
-<table class="table table-sm align-middle">
+<table class="table table-sm align-middle messages-table">
   <thead>
     <tr>
       <% columns.each do |column| %>

app/views/messages/_sent_message_summary.html.erb

@@ -1,8 +1,8 @@
-<tr class="inbox-row">
-  <td><%= link_to message.recipient.display_name, message.recipient %></td>
-  <td><%= link_to message.title, message %></td>
+<tr id="outbox-<%= message.id %>" class="message-summary inbox-row">
+  <td><%= link_to message.recipient.display_name, user_path(message.recipient) %></td>
+  <td><%= link_to message.title, message_path(message) %></td>
   <td class="text-nowrap"><%= l message.sent_on, :format => :friendly %></td>
   <td class="text-nowrap d-flex justify-content-end gap-1">
-    <%= button_to t(".destroy_button"), message_path(message, :referer => request.fullpath), :method => :delete, :remote => true, :class => "btn btn-sm btn-danger", :form_class => "inbox-destroy" %>
+    <%= button_to t(".destroy_button"), message_path(message, :referer => request.fullpath), :method => :delete, :class => "btn btn-sm btn-danger", :form => { :"data-turbo" => true, :class => "destroy-message" } %>
   </td>
 </tr>

app/views/messages/destroy.json.jbuilder

@@ -1,4 +0,0 @@
-json.inboxanchor render(:partial => "layouts/inbox")
-json.inbox_count render(:partial => "inbox_count")
-json.outbox_count render(:partial => "outbox_count")
-json.muted_count render(:partial => "muted_count")

app/views/messages/mark.json.jbuilder

@@ -1,4 +0,0 @@
-json.inboxanchor render(:partial => "layouts/inbox")
-json.inbox_count render(:partial => "inbox_count")
-json.outbox_count render(:partial => "outbox_count")
-json.muted_count render(:partial => "muted_count")

config/eslint.json

@@ -13,7 +13,8 @@
     "OSM": "writable",
     "Matomo": "readonly",
     "Qs": "readonly",
-    "updateLinks": "readonly"
+    "updateLinks": "readonly",
+    "Turbo": "readonly"
   },
   "rules": {
     "accessor-pairs": "error",

test/controllers/messages_controller_test.rb

@@ -408,15 +408,13 @@ class MessagesControllerTest < ActionDispatch::IntegrationTest
     assert_not Message.find(unread_message.id).message_read
 
     # Check that the marking a message read via XHR works
-    post message_mark_path(:message_id => unread_message, :mark => "read"), :xhr => true
-    assert_response :success
-    assert_template "mark"
+    post message_mark_path(:message_id => unread_message, :mark => "read")
+    assert_response :see_other
     assert Message.find(unread_message.id).message_read
 
     # Check that the marking a message unread via XHR works
-    post message_mark_path(:message_id => unread_message, :mark => "unread"), :xhr => true
-    assert_response :success
-    assert_template "mark"
+    post message_mark_path(:message_id => unread_message, :mark => "unread")
+    assert_response :see_other
     assert_not Message.find(unread_message.id).message_read
 
     # Asking to mark a message with no ID should fail

test/system/messages_test.rb

@@ -36,6 +36,7 @@ class MessagesTest < ApplicationSystemTestCase
     assert_text "1 muted message"
 
     click_on "Delete"
-    assert_text "0 muted messages"
+    refute_text "1 muted message"
+    assert_text "You have 0 new messages and 0 old messages"
   end
 end