Stub out working auto close reminder

app/assets/stylesheets/cards.css

@@ -214,20 +214,35 @@
   }
 
   .card__badge {
-    --size: 48px;
+    --size: 5cqi;
 
+    background: var(--color-ink);
     block-size: var(--size);
     border-radius: 50%;
+    color: var(--color-ink-reversed);
+    container-type: inline-size;
+    font-size: 1.5rem;
+    font-weight: 500;
+    inset: 50% auto auto -0.5ch;
     inline-size: var(--size);
-
+    padding: 0.25cqi;
     position: absolute;
-    inset: 50% auto 0 -1ch;
     translate: -100% -50%;
 
-    display: grid;
-    place-content: center;
+    span {
+      display: grid;
+      inset: 0;
+      font-size: 45cqi;
+      font-weight: bold;
+      place-content: center;
+      position: absolute;
+      text-align: center;
+    }
 
-    background: black;
-    color: white;
+    svg {
+      display: block;
+      letter-spacing: 0.25ch;
+      text-transform: uppercase;
+    }
   }
 }

app/models/card/closeable.rb

@@ -2,6 +2,7 @@ module Card::Closeable
   extend ActiveSupport::Concern
 
   AUTO_CLOSE_AFTER = 30.days
+  AUTO_CLOSE_REMINDER = 7.days
 
   included do
     has_one :closure, dependent: :destroy
@@ -25,6 +26,15 @@ module Card::Closeable
     last_active_at + AUTO_CLOSE_AFTER if last_active_at
   end
 
+  def auto_close_days_until
+    return false unless auto_close_at
+    (auto_close_at.to_date - Date.today).to_i
+  end
+
+  def auto_close_remind?
+    auto_close_days_until <= AUTO_CLOSE_REMINDER / 1.day
+  end
+
   def closed?
     closure.present?
   end

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

@@ -23,17 +23,8 @@
 
     <%= render "cards/display/common/background", card: card %>
 
-    <% unless card.closed? %>
-      <% if card.doing? %>
-        <div class="card__badge card__badge--reconsider-soon">
-          <%= local_datetime_tag(card.auto_reconsider_at, style: :daysuntil) -%>
-        </div>
-      <% else %>
-        <div class="card__badge card__badge--closing-soon">
-          <%= local_datetime_tag(card.auto_close_at, style: :daysuntil) -%>
-        </div>
-      <% end %>
+    <% if card.considering? && card.auto_close_remind? %>
+      <%= render "cards/display/preview/badge", top: "closes in", days: card.auto_close_days_until, bottom: "days" %>
     <% end %>
-
   <% end %>
 <% end %>

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

@@ -0,0 +1,23 @@
+<div class="card__badge">
+  <svg viewBox="0 0 200 100">
+    <path id="top-half" fill="transparent" d="M 20,100 A 80,80 0 0,1 180,100" />
+    <text text-anchor="middle" fill="currentColor">
+      <textPath href="#top-half" startOffset="50%" dominant-baseline="middle">
+        <%= top %>
+      </textPath>
+    </text>
+  </svg>
+
+  <span class="circle-badge__number">
+    <%= days %>
+  </span>
+
+  <svg viewBox="0 0 200 100">
+    <path id="bottom-half" d="M 20,0 A 80,80 0 0,0 180,0" fill="transparent" />
+    <text text-anchor="middle" fill="currentColor">
+      <textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle">
+        <%= bottom %>
+      </textPath>
+    </text>
+  </svg>
+</div>