Use turbo frame for assignments

app/controllers/bubbles/assignments_controller.rb

@@ -1,9 +1,15 @@
-class AssignmentsController < ApplicationController
+class Bubbles::AssignmentsController < ApplicationController
   include BubbleScoped, BucketScoped
 
+  def new
+  end
+
+  def show
+  end
+
   def create
     @bubble.assign(find_assignee)
-    redirect_to @bubble
+    render :show
   end
 
   private

app/views/bubbles/_assignments.html.erb

@@ -1,26 +0,0 @@
-<span <%= "hidden" unless bubble.assignees.any? %> id="new-assignee" class="bubble__bubble bubble__meta bubble__assignee <%= "bubble__assignee--new" if bubble.assignees.none? %>">
-  <%= form_with url: bucket_bubble_assignments_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %>
-    <label class="btn btn--plain position-relative fill-transparent" style="<%= "--btn-icon-size: 2em;" unless bubble.assignees.any? %>">
-      <% if bubble.assignees.any? %>
-        <% if bubble.assignees.many? %>
-          <div class="avatar__group">
-            <% bubble.assignees.each do |assignee| %>
-              <%= avatar_image_tag assignee, loading: :lazy, class: "avatar flex-item-no-shrink" %>
-            <% end %>
-          </div>
-        <% else %>
-          <%= avatar_image_tag bubble.assignees.first, loading: :lazy, class: "avatar flex-item-no-shrink" %>
-        <% end %>
-      <% else %>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" fill="var(--bubble-color)"><path d="m11.5 10.3-.6-.2c-.2-.5-.3-1.1-.1-1.6 1.1-1.2 1.6-2.7 1.5-4.3 0-2.4-1.6-4.2-3.8-4.2S4.7 1.8 4.7 4.2c-.1 1.5.4 3.1 1.5 4.3.2.5.2 1.1-.1 1.6l-.6.2c-2.4.9-4.2 1.5-4.8 2.6-.4 1.2-.7 2.4-.7 3.6 0 .3.2.5.5.5h16c.3 0 .5-.2.5-.5 0-1.2-.3-2.4-.7-3.5-.6-1.1-2.4-1.8-4.8-2.7"/></svg>
-      <% end %>
-
-      <%= form.collection_select :assignee_id, bubble.bucket.users.active, :id, :name, { prompt: "Assign to…", selected: bubble.assignees.pluck(:id) },
-            class: "input input--hidden txt-medium",
-            data: { action: "change->form#submit click->form#showPicker" } %>
-      <span class="for-screen-reader">Assign to…</span>
-    </label>
-
-    <%= form.submit "Save", class: "btn", hidden: true %>
-  <% end %>
-</span>

app/views/bubbles/_bubble.html.erb

@@ -16,7 +16,7 @@
       <span class="for-screen-reader"><%= bubble.title %></span>
     <% end %>
 
-    <%= render "bubbles/assignments", bubble: bubble %>
+    <%= turbo_frame_tag dom_id(bubble, :assignments), src: bucket_bubble_assignments_path(bubble.bucket, bubble) %>
     <%= render "bubbles/boosts", bubble: bubble %>
     <%= render "bubbles/color", bubble: bubble %>
     <%= turbo_frame_tag dom_id(bubble, :date_picker), src: bucket_bubble_date_picker_path(bubble.bucket, bubble) %>

app/views/bubbles/assignments/new.html.erb

@@ -0,0 +1,14 @@
+<%= turbo_frame_tag dom_id(@bubble, :assignments) do %>
+  <%= form_with url: bucket_bubble_assignments_path(@bubble.bucket, @bubble), data: { controller: "form" } do |form| %>
+    <div class="bubble__bubble bubble__meta bubble__assignee bubble__assignments--new">
+      <label class="btn btn--plain position-relative fill-transparent" style="<%= "--btn-icon-size: 2em;" unless @bubble.assignees.any? %>">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" fill="var(--bubble-color)"><path d="m11.5 10.3-.6-.2c-.2-.5-.3-1.1-.1-1.6 1.1-1.2 1.6-2.7 1.5-4.3 0-2.4-1.6-4.2-3.8-4.2S4.7 1.8 4.7 4.2c-.1 1.5.4 3.1 1.5 4.3.2.5.2 1.1-.1 1.6l-.6.2c-2.4.9-4.2 1.5-4.8 2.6-.4 1.2-.7 2.4-.7 3.6 0 .3.2.5.5.5h16c.3 0 .5-.2.5-.5 0-1.2-.3-2.4-.7-3.5-.6-1.1-2.4-1.8-4.8-2.7"/></svg>
+        <%= form.collection_select :assignee_id, @bubble.bucket.users.active, :id, :name, { prompt: "Assign to…", selected: @bubble.assignees.pluck(:id) },
+              class: "input input--hidden txt-medium",
+              data: { action: "change->form#submit click->form#showPicker" } %>
+        <span class="for-screen-reader">Assign to…</span>
+      </label>
+      <%= form.submit "Save", class: "btn", hidden: true %>
+    </div>
+  <% end %>
+<% end %>

app/views/bubbles/assignments/show.html.erb

@@ -0,0 +1,28 @@
+<%= turbo_frame_tag dom_id(@bubble, :assignments) do %>
+  <% if @bubble.assignments.any? %>
+    <div class="bubble__bubble bubble__meta bubble__assignee">
+      <%= form_with url: bucket_bubble_assignments_path(@bubble.bucket, @bubble), data: { controller: "form" } do |form| %>
+        <label class="btn btn--plain position-relative fill-transparent" style="<%= "--btn-icon-size: 2em;" unless @bubble.assignees.any? %>">
+          <% if @bubble.assignees.any? %>
+            <% if @bubble.assignees.many? %>
+              <div class="avatar__group">
+                <% @bubble.assignees.each do |assignee| %>
+                  <%= avatar_image_tag assignee, loading: :lazy, class: "avatar flex-item-no-shrink" %>
+                <% end %>
+              </div>
+            <% else %>
+              <%= avatar_image_tag @bubble.assignees.first, loading: :lazy, class: "avatar flex-item-no-shrink" %>
+            <% end %>
+          <% end %>
+
+          <%= form.collection_select :assignee_id, @bubble.bucket.users.active, :id, :name, { prompt: "Assign to…", selected: @bubble.assignees.pluck(:id) },
+                class: "input input--hidden txt-medium",
+                data: { action: "change->form#submit click->form#showPicker" } %>
+          <span class="for-screen-reader">Assign to…</span>
+        </label>
+
+        <%= form.submit "Save", class: "btn", hidden: true %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

app/views/bubbles/show.html.erb

@@ -24,12 +24,19 @@
 <aside class="flex align-start justify-start" style="--bubble-color: <%= @bubble.color %>">
   <div class="flex flex-column gap-half">
     <%= bubble_action_button('new-color', 'art', 'Color it') %>
-    <%= link_to new_bucket_bubble_date_picker_path(@bubble.bucket, @bubble), class: "btn full-width justify-start borderless", data: { turbo_frame: dom_id(@bubble, :date_picker) } do %>
+    <%= link_to new_bucket_bubble_date_picker_path(@bubble.bucket, @bubble),
+        class: "btn full-width justify-start borderless",
+        data: { turbo_frame: dom_id(@bubble, :date_picker) } do %>
       <%= image_tag "calendar-add.svg", aria: { hidden: true }, size: 24 %>
       <span>Add a due date</span>
     <% end %>
+    <%= link_to new_bucket_bubble_assignments_path(@bubble.bucket, @bubble),
+        class: "btn full-width justify-start borderless",
+        data: { turbo_frame: dom_id(@bubble, :assignments) } do %>
+      <%= image_tag "person.svg", aria: { hidden: true }, size: 24 %>
+      <span>Assign to someone</span>
+    <% end %>
     <%= bubble_action_button('new-tag', 'tag', 'Tag this') %>
-    <%= bubble_action_button('new-assignee', 'person', 'Assign to…') %>
     <%= bubble_action_button('new-attachment', 'picture-add', 'Attach a file') %>
     <%= render "bubbles/pop_toggle", bubble: @bubble %>
   </div>

config/routes.rb

@@ -16,7 +16,6 @@ Rails.application.routes.draw do
 
   resources :buckets do
     resources :bubbles do
-      resources :assignments
       resources :boosts
       resources :comments
       resources :tags, shallow: true
@@ -26,6 +25,7 @@ Rails.application.routes.draw do
         resource :pop
         resource :stage_picker
         resource :date_picker
+        resource :assignments
         resources :stagings
       end
     end