Rework the flow for closing and moving between columns

app/assets/stylesheets/cards.css

@@ -106,7 +106,11 @@
   position: relative;
   z-index: 0;
 
-  .btn {
+  &:has(dialog[open]) {
+    z-index: 1;
+  }
+
+  .btn:not(.popup__item, .btn--plain) {
     --btn-background: var(--bubble-color);
     --btn-color: var(--color-ink-reversed);
   }
@@ -355,6 +359,10 @@
   }
 }
 
+.card__move-button {
+  --btn-background: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink));
+}
+
 .card__stages {
   flex: 1 1 25%;
 }

app/controllers/bubbles/stagings_controller.rb

@@ -2,7 +2,11 @@ class Bubbles::StagingsController < ApplicationController
   include BubbleScoped, BucketScoped
 
   def create
-    @bubble.toggle_stage Current.account.stages.find(params[:stage_id])
+    if params[:stage_id].present?
+      @bubble.toggle_stage Current.account.stages.find(params[:stage_id])
+    else
+      @bubble.update!(stage: nil)
+    end
     redirect_to @bubble
   end
 end

app/views/bubbles/_card.html.erb

@@ -31,6 +31,13 @@
       </div>
 
       <%= turbo_frame_tag dom_id(bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(bubble.bucket, bubble) unless (previewing_card? && bubble.popped?) %>
+
+      <% if bubble.stage.nil? %>
+        <%= button_to bucket_bubble_stagings_path(bubble.bucket, bubble, stage_id: bubble.bucket&.workflow&.stages&.first), method: :post, class: "card__move-button card__hide-on-index btn btn--reversed" do %>
+          <span class="txt-nowrap">Move to Doing</span>
+          <%= icon_tag "arrow-right" %>
+        <% end %>
+      <% end %>
     </div>
 
     <footer class="card__footer full-width flex align-start gap">

app/views/bubbles/_pop_toggle.html.erb

@@ -5,11 +5,41 @@
       <span>Un-do</span>
     <% end %>
   <% else %>
-    <%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), class: "btn borderless" do %>
-      <span>Mark as done</span>
-    <% end %>
+    <div class="flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+      <button class="btn borderless" data-action="click->dialog#open:stop">
+        <span>Close as…</span>
+      </button>
+
+      <dialog class="popup panel flex-column align-start gap-half fill-white shadow" style="--row-gap: 0.2em;"
+          aria-label="In stage…" aria-description="In stage…"
+          data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
+        <strong class="popup__title margin-block-start-half pad-inline-half">Close as…</strong>
+        <%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), class: "btn popup__item full-width", form_class: "full-width" do %>
+          <span class="overflow-ellipsis">Completed</span>
+        <% end %>
+        <%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), class: "btn popup__item full-width", form_class: "full-width" do %>
+          <span class="overflow-ellipsis">Duplicate</span>
+        <% end %>
+        <%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), class: "btn popup__item full-width", form_class: "full-width" do %>
+          <span class="overflow-ellipsis">Maybe later</span>
+        <% end %>
+        <%= button_to bucket_bubble_pop_path(bubble.bucket, bubble), class: "btn popup__item full-width", form_class: "full-width" do %>
+          <span class="overflow-ellipsis">Working as intended</span>
+        <% end %>
+
+        <% if bubble.stage.present? %>
+          <%= button_to bucket_bubble_stagings_path(bubble.bucket, bubble, stage_id: ""), method: :post, class: "btn popup__item full-width" do %>
+            <span class="overflow-ellipsis">Move back to Considering</span>
+          <% end %>
+        <% end %>
+      </dialog>
+    </div>
     <span class="card__pop-message">
-      Auto-closes <%= local_datetime_tag(bubble.auto_pop_at, style: :indays) %>.
+      <% if bubble.stage.present? %>
+        Returns to <em>Considering</em> if no activity <%= local_datetime_tag(bubble.auto_pop_at, style: :indays) %>.
+      <% else %>
+        Auto-closes if no activity <%= local_datetime_tag(bubble.auto_pop_at, style: :indays) %>.
+      <% end %>
     </span>
   <% end %>
 </div>

app/views/bubbles/show.html.erb

@@ -61,22 +61,9 @@
   </div>
 
   <% unless @bubble.drafted? || @bubble.creating? %>
-    <% if @bubble.stage.present? %>
-      <div class="card__actions-wrapper">
-        <%= render "bubbles/pop_toggle", bubble: @bubble %>
-      </div>
-    <% else %>
-      <div class="card__actions-wrapper">
-        <div class="card__actions-container center border-radius flex-inline align-center justify-center gap" style="--bubble-color: <%= @bubble.color %>">
-          <%= button_to bucket_bubble_stagings_path(@bubble.bucket, @bubble, stage_id: @bubble.bucket&.workflow&.stages&.first), method: :post, class: "btn borderless" do %>
-            <span>We’re doing this</span>
-          <% end %>
-          <%= button_to bucket_bubble_pop_path(@bubble.bucket, @bubble), class: "btn borderless" do %>
-            <span>Not now</span>
-          <% end %>
-        </div>
-      </div>
-    <% end %>
+    <div class="card__actions-wrapper">
+      <%= render "bubbles/pop_toggle", bubble: @bubble %>
+    </div>
   <% end %>
 
   <% if @bubble.published? %>