Submit form when toggling all-access + caching

app/controllers/buckets_controller.rb

@@ -24,7 +24,7 @@ class BucketsController < ApplicationController
     @bucket.update! bucket_params
     @bucket.accesses.revise granted: grantees, revoked: revokees
 
-    redirect_to bubbles_path(bucket_ids: [ @bucket ])
+    redirect_to edit_bucket_path(@bucket)
   end
 
   def destroy

app/helpers/accesses_helper.rb

@@ -0,0 +1,17 @@
+module AccessesHelper
+  def access_toggles_for(users, selected:)
+    render partial: "buckets/access_toggle",
+      collection: users, as: :user,
+      locals: { selected: selected },
+      cached: ->(user) { [ user, selected ] }
+  end
+
+  def access_toggle_tag(user, &)
+    tag.li class: "flex align-center gap-half margin-none unpad", data: {
+      value: user.name.downcase,
+      creator_id: user.id,
+      controller: "created-by-current-user",
+      created_by_current_user_target: "creation",
+      created_by_current_user_mine_class: "toggler--toggled" }, &
+  end
+end

app/views/bubbles/_messages.html.erb

@@ -5,6 +5,6 @@
     data-created-by-current-user-mine-class="comment--mine">
   <%# Template Dependency: comments/comment %>
   <%# Template Dependency: event_summaries/event_summary %>
-  <%= render bubble.messages, cache: true %>
+  <%= render bubble.messages, cached: true %>
   <%= render "comments/new", bubble: bubble %>
 </section>

app/views/buckets/_access_toggle.erb

@@ -0,0 +1,21 @@
+<%= access_toggle_tag user do %>
+  <figure class="avatar flex-item-no-shrink">
+    <%= avatar_tag user, loading: :lazy %>
+  </figure>
+
+  <div class="min-width">
+    <div class="overflow-ellipsis">
+      <strong><%= user.name %></strong>
+    </div>
+  </div>
+
+  <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
+
+  <%= image_tag "check.svg", size: 20, class: "toggler__visible-when-on colorize--black flex-item-no-shrink", aria: { hidden: "true" } %>
+
+  <label class="switch toggler__visible-when-off flex-item-no-shrink">
+    <%= check_box_tag "user_ids[]", user.id, selected, class: "switch__input", id: nil %>
+    <span class="switch__btn round"></span>
+    <span class="for-screen-reader">Give <%= user.name %> access</span>
+  </label>
+<% end %>

app/views/buckets/_user_toggle.html.erb

@@ -1,26 +0,0 @@
-<li class="flex align-center gap-half margin-none unpad" data-value="<%= user.name.downcase %>">
-  <figure class="avatar flex-item-no-shrink">
-    <%= avatar_tag user, loading: :lazy %>
-  </figure>
-
-  <div class="min-width">
-    <div class="overflow-ellipsis">
-      <strong><%= user.name %></strong>
-    </div>
-  </div>
-
-  <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
-
-  <% if user == Current.user %>
-    <%= hidden_field_tag "user_ids[]", user.id, id: nil %>
-    <%= image_tag "check.svg", size: 20, class: "colorize--black flex-item-no-shrink", aria: { hidden: "true" } %>
-  <% else %>
-    <%= image_tag "check.svg", size: 20, class: "toggler__visible-when-on colorize--black flex-item-no-shrink", aria: { hidden: "true" } %>
-
-    <label class="switch toggler__visible-when-off flex-item-no-shrink">
-      <%= check_box_tag "user_ids[]", user.id, selected, class: "switch__input", id: nil %>
-      <span class="switch__btn round"></span>
-      <span class="for-screen-reader">Give <%= user.name %> access</span>
-    </label>
-  <% end %>
-</li>

app/views/buckets/edit.html.erb

@@ -17,7 +17,7 @@
 <% end %>
 
 <div class="panel shadow center" style="--panel-size: 55ch;">
-  <%= form_with model: @bucket, class: "flex flex-column gap txt-large", controller: "form" do |form| %>
+  <%= form_with model: @bucket, class: "flex flex-column gap txt-large", data: { controller: "form", turbo_action: "replace" } do |form| %>
     <div class="flex align-center gap">
       <%= translation_button(:bucket_name) %>
 
@@ -29,7 +29,7 @@
     </div>
 
     <section class="margin-block pad-inline fill-shade border-radius">
-      <menu class="flex flex-column gap margin-none pad txt-medium" data-controller="filter toggle-class" data-filter-active-class="filter--active" data-filter-selected-class="selected" data-toggle-class-toggle-class="toggler--toggled">
+      <menu class="flex flex-column gap margin-none pad txt-medium" data-controller="filter" data-filter-active-class="filter--active" data-filter-selected-class="selected">
         <li class="flex align-center gap margin-none">
           <figure class="avatar flex-item-no-shrink" style="--avatar-border-radius: 0; --avatar-size: 4ch;">
             <%= image_tag "everyone.svg", aria: { hidden: "true" }, class: "colorize--black" %>
@@ -43,7 +43,7 @@
           <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true" />
 
           <label for="bucket_all_access" class="switch">
-            <%= form.check_box :all_access, class: "switch__input", checked: @bucket.all_access?, data: { action: "change->toggle-class#toggle" } %>
+            <%= form.check_box :all_access, class: "switch__input", checked: @bucket.all_access?, data: { action: "change->form#submit" } %>
             <span class="switch__btn round"></span>
             <span class="for-screen-reader">Give everyone access to this project</span>
           </label>
@@ -55,15 +55,15 @@
           <input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-action="input->filter#filter">
         <% end %>
 
-        <div data-filter-target="list">
-          <%= render partial: "buckets/user_toggle", collection: @selected_users, as: :user, locals: { selected: true } %>
+        <%= tag.div class: { "toggler--toggled": @bucket.all_access? }, data: { filter_target: "list" } do %>
+          <%= access_toggles_for @selected_users, selected: true %>
 
           <% if @selected_users.any? && @unselected_users.any? %>
             <hr class="separator full-width" style="--border-style: solid">
           <% end %>
 
-          <%= render partial: "buckets/user_toggle", collection: @unselected_users, as: :user, locals: { selected: false } %>
-        </div>
+          <%= access_toggles_for @unselected_users, selected: false %>
+        <% end %>
       </menu>
     </section>