Merge branch 'main' into tray-updates

* main:
  Tighten cards
  Stub recently closed filter
  Introduce a list style for all but the first six completed cards

app/assets/stylesheets/card-columns.css

@@ -167,6 +167,51 @@
       @media (max-width: 960px) {
         inline-size: calc((100% - var(--cards-gap)) / 2);
       }
+
+      &:nth-of-type(7) {
+        margin-block-start: var(--cards-gap);
+      }
+
+      &:nth-of-type(n+7) {
+        background-color: var(--color-canvas);
+        border: none;
+        border-block-end: 1px solid var(--color-ink-lighter);
+        box-shadow: none;
+        inline-size: 100%;
+        margin-inline: auto;
+        max-inline-size: 110ch;
+        padding-block: 0 var(--cards-gap);
+
+        .card__background,
+        .card__meta {
+          display: none;
+        }
+
+        .card__body {
+          padding-block-end: 0;
+        }
+
+        .card__closed {
+          aspect-ratio: unset;
+          border-width: 0.5ch;
+          font-size: 0.75em;
+          inset: auto 0 auto auto;
+          transform: none;
+        }
+
+        .card__closed-by-line,
+        .card__closed-date {
+          display: none;
+        }
+
+        .card__header {
+          margin: 0;
+        }
+
+        .card__title {
+          min-block-size: 0;
+        }
+      }
     }
   }
 }

app/assets/stylesheets/cards.css

@@ -69,6 +69,11 @@
     margin-block-start: calc(-1 * var(--card-padding-block));
     margin-inline-start: calc(-1 * var(--card-padding-inline));
     min-inline-size: 0;
+
+    .cards--considering & {
+      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+      margin: 0 0 calc(-0.5 * var(--card-padding-inline)) 0;
+    }
   }
 
   .card__collection {
@@ -78,6 +83,12 @@
     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);
+      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+      padding: 0 0 0 var(--inline-space);
+    }
   }
 
   .card__id {
@@ -96,6 +107,11 @@
     display: inline-flex;
     margin-inline-start: var(--inline-space-half);
     padding-inline-start: calc(var(--inline-space) * 0.75);
+
+    .cards--considering & {
+      border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
+      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+    }
   }
 
   .card__tags {
@@ -148,13 +164,8 @@
     font-size: var(--text-xx-large);
     font-weight: 900;
     line-height: 1.2;
-    min-block-size: 3lh;
     text-wrap: balance;
 
-    .card-perma__bg & {
-      min-block-size: unset;
-    }
-
     .card-field__title {
       &:is(textarea)::placeholder {
         color: inherit;
@@ -256,7 +267,7 @@
     inset: auto var(--block-space) var(--block-space-double) auto;
     justify-content: center;
     max-inline-size: 25ch;
-    min-inline-size: 18ch;
+    min-inline-size: 16ch;
     mix-blend-mode: multiply;
     padding: 1ch;
     position: absolute;
@@ -273,7 +284,7 @@
   }
 
   .card__closed-title {
-    font-size: 1.5em;
+    font-size: 1.3em;
     font-weight: 900;
     line-height: 1.2;
     position: relative;

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

@@ -1,23 +1,27 @@
 <% cache card do %>
   <%= 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/preview/tags", card: card %>
-    </header>
+    <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/tags", card: card %>
+        </header>
 
-    <div class="card__body justify-space-between">
-      <div class="card__content">
-        <h1 class="card__title overflow-line-clamp">
-          <%= card.title %>
-        </h1>
+        <div class="card__body justify-space-between">
+          <div class="card__content">
+            <h1 class="card__title overflow-line-clamp">
+              <%= card.title %>
+            </h1>
 
-        <%= link_to collection_card_path(card.collection, card), class: "card__link", title: card_title_tag(card), data: { action: "dialog#close", turbo_frame: "_top" } do %>
-          <span class="for-screen-reader"><%= card.title %></span>
-        <% end %>
+            <%= link_to collection_card_path(card.collection, card), class: "card__link", title: card_title_tag(card), data: { action: "dialog#close", turbo_frame: "_top" } do %>
+              <span class="for-screen-reader"><%= card.title %></span>
+            <% end %>
+          </div>
+        </div>
       </div>
 
       <%= render "cards/stagings/stages", card: card if card.doing? %>

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

@@ -6,6 +6,6 @@
   <div class="card__closed">
     <span class="card__closed-title" data-text="<%= card.closure.reason %>"><%= card.closure.reason %></span>
     <strong class="card__closed-date"><%= card.closed_at.strftime("%b %d, %Y") %></strong>
-    <span>by <span class="card__closed-by"><%= card.closed_by.familiar_name %></span></span>
+    <span class="card__closed-by-line">by <span class="card__closed-by"><%= card.closed_by.familiar_name %></span></span>
   </div>
 <% end %>

app/views/cards/index/_closure_filter.html.erb

@@ -0,0 +1,37 @@
+<div class="card-filter--column full-width position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+  <button class="cards__heading input input--select borderless" data-action="click->dialog#open:stop">
+    <strong class="overflow-ellipsis">
+      Recently closed
+    </strong>
+  </button>
+
+  <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow"
+    aria-label="Closed with reason…" aria-description="Closed with reason…"
+    data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
+    <strong class="popup__title margin-block-start-half pad-inline-half">Closed with reason…</strong>
+    <%= form_with url: cards_path, method: :get, class: "flex flex-column full-width popup__list",
+          data: { controller: "form" } do |form| %>
+      <% filter.as_params.except(:closure_reason_ids).each do |key, value| %>
+        <%= filter_hidden_field_tag key, value %>
+      <% end %>
+
+      <%= link_to cards_path(filter.as_params.except(:closure_reason_ids)), class: "btn popup__item" do %>
+        <span class="overflow-ellipsis">All recently closed</span>
+      <% end %>
+
+      <% Closure::Reason.all.each do |reason| %>
+        <div class="btn popup__item">
+          <%= form.check_box :closure_reason_ids, {
+                multiple: true,
+                checked: false,
+                data: { action: "change->form#submit" },
+                include_hidden: false,
+          }, reason.label %>
+
+          <%= form.label :closure_reason_ids, reason.label, for: form.field_id(:closure_reason_ids, reason.label), class: "overflow-ellipsis" %>
+          <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+        </div>
+      <% end %>
+    <% end %>
+  </dialog>
+</div>

app/views/cards/index/engagement/_closed.html.erb

@@ -1,7 +1,5 @@
 <section id="closed-cards" class="cards cards--closed">
-  <h2 class="cards__heading">
-    Recently closed
-  </h2>
+  <%= render "cards/index/closure_filter", filter: filter %>
 
   <% if page.used? %>
     <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>