Allow cards to be moved to another collection

app/assets/stylesheets/card-perma.css

@@ -41,6 +41,17 @@
       max-inline-size: 32ch;
     }
 
+    .collection-picker__button {
+      --btn-border-size: 0;
+    
+      font-size: 0.5em;
+      margin-inline-start: 1ch;
+  
+      + .panel {
+        --panel-size: 18ch;
+      }
+    }
+
     @media (max-width: 800px) {
       --padding-inline: 3cqmin;
 

app/assets/stylesheets/cards.css

@@ -82,7 +82,6 @@
     color: var(--color-ink-inverted);
     font-weight: 800;
     padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double);
-    text-transform: uppercase;
 
     .cards--considering & {
       background-color: var(--color-canvas);
@@ -107,6 +106,7 @@
     display: inline-flex;
     margin-inline-start: var(--inline-space-half);
     padding-inline-start: calc(var(--inline-space) * 0.75);
+    text-transform: uppercase;
 
     .cards--considering & {
       border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));

app/controllers/cards_controller.rb

@@ -28,7 +28,9 @@ class CardsController < ApplicationController
   def update
     @card.update! card_params
 
-    if @card.published?
+    if params[:card][:collection_id].present?
+      redirect_to collection_card_path(@card.collection, @card)
+    elsif @card.published?
       render_card_replacement
     else
       redirect_to @card
@@ -54,7 +56,7 @@ class CardsController < ApplicationController
     end
 
     def card_params
-      params.expect(card: [ :status, :title, :description, :image, tag_ids: [] ])
+      params.expect(card: [ :collection_id, :status, :title, :description, :image, tag_ids: [] ])
     end
 
     def render_card_replacement

app/views/cards/_container.html.erb

@@ -10,12 +10,7 @@
   <div class="card-perma__bg">
     <%= card_article_tag card, class: "card" do %>
       <header class="card__header">
-        <span class="card__collection">
-          <span class="card__id"><%= card.id %></span>
-          <%= link_to card.collection.name, cards_path(collection_ids: [ card.collection ]),
-                class: "card__collection-name overflow-ellipsis" %>
-        </span>
-
+        <%= render "cards/display/perma/collection", card: card %>
         <%= render "cards/display/perma/tags", card: card %>
       </header>
 

app/views/cards/display/_preview.html.erb

@@ -3,11 +3,7 @@
     <div class="flex gap">
       <div class="flex flex-column flex-item-grow">
         <header class="card__header">
-          <span class="card__collection">
-            <span class="card__id"><%= card.id %></span>
-            <%= link_to card.collection.name, cards_path(collection_ids: [ card.collection ]),
-                  class: "card__collection-name txt-uppercase overflow-ellipsis" %>
-          </span>
+          <%= render "cards/display/preview/collection", card: card %>
           <%= render "cards/display/preview/tags", card: card %>
         </header>
 

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

@@ -0,0 +1,6 @@
+<div class="card__collection flex align-start">
+  <span class="card__id"><%= card.id %></span>
+  <%= link_to card.collection.name, cards_path(collection_ids: [ card.collection ]),
+        class: "card__collection-name overflow-ellipsis" %>
+  <%= yield %>
+</div>

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

@@ -0,0 +1,38 @@
+<%= render "cards/display/common/collection", card: card do %>
+  <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
+    <button class="collection-picker__button btn btn--reversed card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
+      <%= icon_tag "menu-dots-horizontal" %>
+      <span class="for-screen-reader">Choose a collection for this card</span>
+    </button>
+
+    <dialog class="popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog">
+      <%= tag.div class: "max-width full-width", data: {
+          controller: "filter", 
+          dialog_target: "dialog",
+          filter_active_class: "filter--active", 
+          filter_selected_class: "selected"} do %>
+        <strong class="popup__title pad-inline-half txt-nowrap">Put this card in…</strong>
+
+        <% if Current.user.collections.count > 20 %>
+          <input placeholder="Find a collection…" class="input input--transparent txt-small margin-block-half" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-action="input->filter#filter" autofocus>
+        <% end %>
+
+        <%= form_with(model: card, url: collection_card_path(card.collection, card), method: :patch, class: "full-width", data: { controller: "form" }) do |form| %>
+          <ul class="flex flex-column full-width popup__list margin-block-start-half margin-none-inline margin-none-block-end unpad max-width" data-filter-target="list">
+            <% Current.user.collections.alphabetically.each do |collection| %>
+              <li class="popup__group flex align-center full-width" data-value="<%= collection.name.downcase %>">
+                <label class="btn popup__item min-width flex-item-grow full-width unpad-inline">
+                  <%= form.radio_button :collection_id, collection.id, 
+                      class: "visually-hidden",
+                      data: { action: "change->form#submit" } %>
+                  <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" if card.collection == collection %>
+                </label>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
+      <% end %>
+    </dialog>
+  </div>
+<% end %>

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

@@ -0,0 +1 @@
+<%= render "cards/display/common/collection", card: card  %>