Filter the doing column by stage

app/assets/stylesheets/cards.css

@@ -64,11 +64,10 @@
   margin: auto;
   max-inline-size: 100ch;
   padding-block: var(--block-space-half);
-  position: relative;
-  z-index: 0;
 
   .card {
     aspect-ratio: unset;
+    z-index: unset;
   }
 }
 
@@ -167,6 +166,17 @@
   letter-spacing: 0.5ch;
   padding: var(--block-space-half) var(--inline-space-double);
 }
+
+.card-column__filter {
+  > button {
+    --hover-size: 0;
+
+    inline-size: auto;
+    padding: 0 2em 0 0;
+    margin-inline-start: 2em;
+  }
+}
+
 .card__container {
   --actions-block-inset: 1.5rem;
   --actions-inline-inset: 4rem;
@@ -226,7 +236,6 @@
   max-inline-size: 120ch;
   padding: var(--container-padding);
   place-content: center;
-  view-transition-name: cards-container;
 
   .card {
     --block-space: 1em;
@@ -238,6 +247,7 @@
     font-size: 3cqi;
     flex: 0 0 var(--card-size);
     inline-size: var(--card-size);
+    z-index: -1;
   }
 
   .card__meta,
@@ -302,7 +312,8 @@
   position: absolute;
   z-index: -1;
 
-  .cards & {
+  .cards &,
+  .cards--grid & {
     z-index: 1;
   }
 }
@@ -405,7 +416,7 @@
   justify-content: space-between;
   padding: var(--block-space-half) calc(var(--inline-space) * 1.5);
   transform: rotate(-10deg);
-  z-index: 1;
+  z-index: -1;
 }
 
 .card__popped-by {

app/views/bubbles/index.html.erb

@@ -43,20 +43,65 @@
 <% end %>
 
 <div class="cards--columns">
-  <section class="cards position-relative" style="align-items: center; border-inline-end: 1px solid var(--color-subtle);">
+  <section class="cards" style="align-items: center; border-inline-end: 1px solid var(--color-subtle);">
     <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block-start margin-block-end">
       Considering
     </h2>
-    <% if (unstaged_bubbles = @bubbles.where(stage: nil)).any? %>
+    <% if (unstaged_bubbles = Filter.from_params(@filter.as_params.except(:stage_ids)).tap { |f| f.creator = Current.user }.bubbles.where(stage: nil)).any? %>
       <%= render partial: "bubbles/card_mini", collection: unstaged_bubbles, as: :bubble, cached: true %>
     <% else %>
       <p class="txt-medium translucent">Nothing here</p>
     <% end %>
   </section>
   <section class="cards gap position-relative" style="align-items: center; view-transition-name: cards-container;" data-controller="bubble-size" data-action="turbo:morph@window->bubble-size#resize">
-    <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block-start margin-block-end">
-      Doing
-    </h2>
+    <% if workflow = @filter.buckets.first&.workflow %>
+      <div class="card-column__filter flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+        <button class="txt-align-center input input--select borderless center txt-uppercase txt-medium margin-none-block-start margin-block-end" data-action="click->dialog#open:stop">
+          <strong class="overflow-ellipsis">
+            <% if @filter.stages.any? %>
+              <%= @filter.stages.map(&:name).to_sentence %>
+            <% else %>
+              Doing
+            <% end %>
+          </strong>
+        </button>
+
+        <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow"
+            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">In stage(s)…</strong>
+          <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+                data: { controller: "form" } do |form| %>
+            <% @filter.as_params.except(:stage_ids).each do |key, value| %>
+              <%= filter_hidden_field_tag key, value %>
+            <% end %>
+
+            <%= link_to bubbles_path(@filter.as_params.except(:stage_ids)), class: "btn popup__item" do %>
+              <span class="overflow-ellipsis">Clear all</span>
+            <% end %>
+                
+            <% workflow.stages.each do |stage| %>
+              <div class="btn popup__item">
+                <%= form.check_box :stage_ids, {
+                  multiple: true,
+                  checked: @filter.stages.include?(stage),
+                  data: { action: "change->form#submit" },
+                  include_hidden: false,
+                  }, stage.id %>
+
+                <%= form.label :stage_ids, stage.name, for: form.field_id(:stage_ids, stage.id), class: "overflow-ellipsis" %>
+                <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+              </div>
+            <% end %>
+          <% end %>
+        </dialog>
+      </div>
+    <% else %>
+      <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block-start margin-block-end">
+        Doing
+      </h2>>
+    <% end %>
+
     <% if (staged_bubbles = @bubbles.where.not(stage: nil)).any? %>
       <%= render partial: "bubbles/card", collection: staged_bubbles, as: :bubble, cached: true %>
     <% else %>
@@ -69,7 +114,7 @@
   <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none">
     Recently closed
   </h2>
-  <section class="cards--grid position-relative">
+  <section class="cards--grid">
     <% if (popped_bubbles = Filter.from_params(@filter.as_params.merge(indexed_by: "popped")).tap { |f| f.creator = Current.user }.bubbles).any? %>
       <%= render partial: "bubbles/card", collection: popped_bubbles, as: :bubble, cached: true %>
     <% else %>

app/views/filters/_stages.html.erb

@@ -22,17 +22,17 @@
         
         <% workflow = Current.account.workflows.first %>
         <% workflow.stages.each do |stage| %>
-            <div class="btn popup__item">
-              <%= form.check_box :stage_ids, {
-                multiple: true,
-                checked: filter.stages.include?(stage),
-                data: { action: "change->form#submit" },
-                include_hidden: false,
-            }, stage.id %>
+          <div class="btn popup__item">
+            <%= form.check_box :stage_ids, {
+              multiple: true,
+              checked: filter.stages.include?(stage),
+              data: { action: "change->form#submit" },
+              include_hidden: false,
+              }, stage.id %>
 
-              <%= form.label :stage_ids, stage.name, for: form.field_id(:stage_ids, stage.id), class: "overflow-ellipsis" %>
-              <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
-            </div>
+            <%= form.label :stage_ids, stage.name, for: form.field_id(:stage_ids, stage.id), class: "overflow-ellipsis" %>
+            <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+          </div>
         <% end %>
       <% end %>
     </dialog>