From ff6464ffef6a06d0a79a1bb932fe1130604baa2b Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 14 Apr 2025 17:02:50 -0500
Subject: [PATCH] Stub out closing soon badge

---
 app/assets/stylesheets/cards.css               | 18 ++++++++++++++++++
 app/assets/stylesheets/pins.css                |  4 ++++
 .../controllers/local_time_controller.js       | 14 +++++++++++++-
 app/views/cards/display/_preview.html.erb      | 13 +++++++++++++
 4 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 6f869df5c..33c9eb29b 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -212,4 +212,22 @@
      -2px 2px 0 var(--card-color),
       2px 2px 0 var(--card-color);
   }
+
+  .card__badge {
+    --size: 48px;
+
+    block-size: var(--size);
+    border-radius: 50%;
+    inline-size: var(--size);
+
+    position: absolute;
+    inset: 50% auto 0 -1ch;
+    translate: -100% -50%;
+
+    display: grid;
+    place-content: center;
+
+    background: black;
+    color: white;
+  }
 }
diff --git a/app/assets/stylesheets/pins.css b/app/assets/stylesheets/pins.css
index e42f2d3e7..848410931 100644
--- a/app/assets/stylesheets/pins.css
+++ b/app/assets/stylesheets/pins.css
@@ -76,5 +76,9 @@
       inset: 0 0 auto auto;
       position: absolute;
     }
+
+    .card__badge {
+      display: none;
+    }
   }
 }
diff --git a/app/javascript/controllers/local_time_controller.js b/app/javascript/controllers/local_time_controller.js
index 3bc77b769..a36ac305b 100644
--- a/app/javascript/controllers/local_time_controller.js
+++ b/app/javascript/controllers/local_time_controller.js
@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 import { differenceInDays } from "helpers/date_helpers"
 
 export default class extends Controller {
-  static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays", "daysago" ]
+  static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays", "daysago", "daysuntil" ]
 
   #timer
 
@@ -14,6 +14,7 @@ export default class extends Controller {
     this.agoFormatter = new AgoFormatter()
     this.daysagoFormatter = new DaysAgoFormatter()
     this.indaysFormatter = new InDaysFormatter()
+    this.daysuntilFormatter = new DaysUntilFormatter()
   }
 
   connect() {
@@ -60,6 +61,10 @@ export default class extends Controller {
     this.#formatTime(this.daysagoFormatter, target)
   }
 
+  daysuntilTargetConnected(target) {
+    this.#formatTime(this.daysuntilFormatter, target)
+  }
+
   #refreshRelativeTimes() {
     this.agoTargets.forEach(target => {
       this.#formatTime(this.agoFormatter, target)
@@ -121,6 +126,13 @@ class InDaysFormatter {
   }
 }
 
+class DaysUntilFormatter {
+  format(date) {
+    const days = differenceInDays(new Date(), date)
+    return styleableValue(days)
+  }
+}
+
 function styleableValue(value) {
   return `<span class="local-time-value">${value}</span>`
 }
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 7d673308c..419100891 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -22,5 +22,18 @@
     </footer>
 
     <%= 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 %>
+    <% end %>
+
   <% end %>
 <% end %>