Just close as done

app/assets/stylesheets/expander.css

@@ -1,111 +0,0 @@
-/* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
-
-.expander {
-  --expander-height: calc(1em + 1lh);
-  --expander-width: 11ch;
-  --expander-radius: calc(var(--expander-height) / 2);
-  --expander-duration: 150ms;
-
-  interpolate-size: allow-keywords;
-  position: relative;
-  z-index: 1;
-}
-
-.expander__button {
-  --btn-border-radius: var(--expander-radius);
-
-  align-items: center;
-  block-size: var(--expander-height);
-  cursor: pointer;
-  display: flex;
-  inline-size: var(--expander-width);
-  justify-content: flex-start;
-  padding-inline: 1.5ch;
-  position: relative;
-  white-space: nowrap;
-  z-index: 1;
-
-  &::-webkit-details-marker {
-    display: none;
-  }
-
-  [open] & {
-    filter: none;
-  }
-
-  .icon {
-    font-size: 1ch;
-  }
-}
-
-.expander__content {
-  --btn-border-radius: var(--expander-radius);
-
-  align-items: stretch;
-  border-radius: var(--expander-radius);
-  flex-direction: column;
-  filter: none;
-  gap: 0;
-  padding-block-start: var(--expander-height);
-
-  &:hover {
-    box-shadow: none;
-  }
-}
-
-/* For browsers that support animation */
-@supports selector(details::details-content) {
-  .expander::details-content {
-    --btn-border-radius: var(--expander-radius);
-
-    block-size: var(--expander-height);
-    border-radius: var(--expander-radius);
-    inset: 0 auto auto 0;
-    inline-size: var(--expander-width);
-    overflow: clip;
-    position: absolute;
-    transition: content-visibility var(--expander-duration) allow-discrete, block-size var(--expander-duration), inline-size var(--expander-duration);
-  }
-
-  .expander[open]::details-content {
-    block-size: auto;
-    inline-size: auto;
-  }
-
-  .expander__content {
-    min-inline-size: var(--expander-width);
-  }
-}
-
-/* Fallback for browsers that don't support animation */
-@supports not selector(details::details-content) {
-  .expander__content {
-    border-radius: var(--expander-radius);
-    inset: 0 auto auto 0;
-    min-inline-size: var(--expander-width);
-    position: absolute;
-
-    [open] & {
-      block-size: auto;
-      inline-size: auto;
-    }
-  }
-}
-
-.expander__item {
-  --btn-background: var(--card-color);
-  --btn-border-radius: 0.3em;
-  --btn-border-size: 0;
-  --btn-font-weight: 500;
-  --btn-padding: var(--inline-space-half) var(--inline-space);
-
-  inline-size: calc(100% + var(--inline-space-double));
-  margin-inline-start: calc(-1 * var(--inline-space));
-  justify-content: flex-start;
-  white-space: nowrap;
-
-  /* &:hover,
-  &:focus-visible {
-    background-color: oklch(var(--lch-canvas) / 15%);
-  } */
-}

app/views/cards/container/_closure.html.erb

@@ -7,19 +7,9 @@
       <% end %>
     </div>
   <% else %>
-    <details class="expander" data-controller="details" data-details-target="details" data-action="keydown.esc->details#close:stop click@document->details#closeOnClickOutside">
-      <summary class="expander__button btn borderless">
-        Close as
-        <%= icon_tag "caret-down" %>
-      </summary>
-      <div class="expander__content btn borderless">
-        <% Closure::Reason.labels.each do |label| %>
-          <%= button_to card_closure_path(card, reason: label), class: "expander__item btn" do %>
-            <span class="overflow-ellipsis"><%= label %></span>
-          <% end %>
-        <% end %>
-      </div>
-    </details>
+    <%= button_to card_closure_path(card, reason: "Done"), class: "btn borderless" do %>
+      <span class="overflow-ellipsis">Mark as Done</span>
+    <% end %>
     <% if card.entropic? && card.open? %>
       <div class="card-perma__closure-message">
         Closes as “Not Now” <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%> if there’s no activity.
@@ -27,4 +17,3 @@
     <% end %>
   <% end %>
 </div>
-