Move perma collection picker to turbo frame

app/controllers/cards/collections_controller.rb

@@ -1,9 +1,19 @@
 class Cards::CollectionsController < ApplicationController
-  include CollectionScoped
+  before_action :set_collection, only: %i[ update ]
+
+  def edit
+    @card = Current.user.accessible_cards.find(params[:card_id])
+    @collections = Current.user.collections.ordered_by_recently_accessed
+  end
 
   def update
     @card = Current.user.accessible_cards.find(params[:card_id])
     @card.move_to(@collection)
     redirect_to @card
   end
+
+  private
+    def set_collection
+      @collection = Current.user.collections.find(params[:collection_id])
+    end
 end

app/views/cards/collections/edit.html.erb

@@ -0,0 +1,26 @@
+<%= turbo_frame_tag "collection_picker" do %>
+  <%= tag.div class: "max-width full-width", data: {
+        action: "turbo:before-cache@document->dialog#close dialog:show@document->navigable-list#reset keydown->navigable-list#navigate filter:changed->navigable-list#reset",
+        controller: "filter navigable-list",
+        dialog_target: "dialog",
+        navigable_list_focus_on_selection_value: false,
+        navigable_list_actionable_items_value: true } do %>
+    <strong class="popup__title pad-inline-half">Move this card to…</strong>
+
+    <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small margin-block-half font-weight-normal", autofocus: true,
+          type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
+
+    <ul class="popup__list margin-block-start-half margin-none-block-end" data-filter-target="list">
+      <% @collections.each do |collection| %>
+        <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" aria-checked="<%= @card.collection == collection %>">
+          <%= button_to card_collection_path(@card, params: { collection_id: collection.id }), method: :patch,
+                class: "popup__btn btn",
+                form_class: "max-width flex-item-grow" do %>
+            <span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
+            <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

app/views/cards/display/perma/_collection.html.erb

@@ -7,30 +7,7 @@
       </button>
 
       <dialog class="popup panel flex-column align-start gap-half fill-white shadow margin-block-double" data-dialog-target="dialog">
-        <%= tag.div class: "max-width full-width", data: {
-            action: "turbo:before-cache@document->dialog#close dialog:show@document->navigable-list#reset keydown->navigable-list#navigate filter:changed->navigable-list#reset",
-            controller: "filter navigable-list",
-            dialog_target: "dialog",
-            navigable_list_focus_on_selection_value: false,
-            navigable_list_actionable_items_value: true } do %>
-          <strong class="popup__title pad-inline-half">Move this card to…</strong>
-
-          <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small margin-block-half font-weight-normal", autofocus: true,
-              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
-
-          <ul class="popup__list margin-block-start-half margin-none-block-end" data-filter-target="list">
-            <% Current.user.collections.ordered_by_recently_accessed.each do |collection| %>
-              <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" aria-checked="<%= card.collection == collection %>">
-                <%= button_to card_collection_path(card, params: { collection_id: collection.id }), method: :patch,
-                    class: "popup__btn btn",
-                    form_class: "max-width flex-item-grow" do %>
-                  <span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
-                  <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" %>
-                <% end %>
-              </li>
-            <% end %>
-          </ul>
-        <% end %>
+        <%= turbo_frame_tag "collection_picker", src: edit_card_collection_path(card), target: "_top" %>
       </dialog>
     </div>
   <% end %>

config/routes.rb

@@ -69,7 +69,7 @@ Rails.application.routes.draw do
       resource :reading
       resource :recover
       resource :watch
-      resource :collection, only: :update
+      resource :collection
 
       resources :assignments
       resources :taggings