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 01/14] 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 %>

From ad80aee38eeddad7618a9e0e8c3ec3cced413c87 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 15 Apr 2025 13:15:29 -0500
Subject: [PATCH 02/14] Stub out working auto close reminder

---
 app/assets/stylesheets/cards.css              | 29 ++++++++++++++-----
 app/models/card/closeable.rb                  | 10 +++++++
 app/views/cards/display/_preview.html.erb     | 13 ++-------
 .../cards/display/preview/_badge.html.erb     | 23 +++++++++++++++
 4 files changed, 57 insertions(+), 18 deletions(-)
 create mode 100644 app/views/cards/display/preview/_badge.html.erb

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 33c9eb29b..00c3de056 100644
--- a/app/assets/stylesheets/cards.css
+++ b/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;
+    }
   }
 }
diff --git a/app/models/card/closeable.rb b/app/models/card/closeable.rb
index ce0a63e33..5b7ab98af 100644
--- a/app/models/card/closeable.rb
+++ b/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
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 419100891..2dc6b70f1 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/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 %>
diff --git a/app/views/cards/display/preview/_badge.html.erb b/app/views/cards/display/preview/_badge.html.erb
new file mode 100644
index 000000000..ed58db664
--- /dev/null
+++ b/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>

From eeadc1c494724cba398c17df3e01a3f067f8c5fc Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 15 Apr 2025 13:22:12 -0500
Subject: [PATCH 03/14] Make it look like a stamp

---
 app/assets/stylesheets/cards.css | 10 +++++-----
 app/models/card/closeable.rb     |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 00c3de056..c6eede99d 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -216,24 +216,24 @@
   .card__badge {
     --size: 5cqi;
 
-    background: var(--color-ink);
+    border: 1px solid currentColor;
     block-size: var(--size);
     border-radius: 50%;
-    color: var(--color-ink-reversed);
+    color: var(--color-negative);
     container-type: inline-size;
     font-size: 1.5rem;
-    font-weight: 500;
+    font-weight: bold;
     inset: 50% auto auto -0.5ch;
     inline-size: var(--size);
-    padding: 0.25cqi;
+    padding: calc(var(--size) * 0.05);
     position: absolute;
+    transform: rotate(-10deg);
     translate: -100% -50%;
 
     span {
       display: grid;
       inset: 0;
       font-size: 45cqi;
-      font-weight: bold;
       place-content: center;
       position: absolute;
       text-align: center;
diff --git a/app/models/card/closeable.rb b/app/models/card/closeable.rb
index 5b7ab98af..2f9c69d76 100644
--- a/app/models/card/closeable.rb
+++ b/app/models/card/closeable.rb
@@ -2,7 +2,7 @@ module Card::Closeable
   extend ActiveSupport::Concern
 
   AUTO_CLOSE_AFTER = 30.days
-  AUTO_CLOSE_REMINDER = 7.days
+  AUTO_CLOSE_REMINDER = 22.days
 
   included do
     has_one :closure, dependent: :destroy

From adad6dd657b8985bbec059a67cb0ec168776e3fa Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 15 Apr 2025 13:24:40 -0500
Subject: [PATCH 04/14] Remind 7 days before auto close

---
 app/models/card/closeable.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/models/card/closeable.rb b/app/models/card/closeable.rb
index 2f9c69d76..5b7ab98af 100644
--- a/app/models/card/closeable.rb
+++ b/app/models/card/closeable.rb
@@ -2,7 +2,7 @@ module Card::Closeable
   extend ActiveSupport::Concern
 
   AUTO_CLOSE_AFTER = 30.days
-  AUTO_CLOSE_REMINDER = 22.days
+  AUTO_CLOSE_REMINDER = 7.days
 
   included do
     has_one :closure, dependent: :destroy

From f1dbe1bcafaec898fa49ff112c9630862e6743ba Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 15 Apr 2025 13:26:41 -0500
Subject: [PATCH 05/14] Better prop names

---
 app/views/cards/display/_preview.html.erb       | 2 +-
 app/views/cards/display/preview/_badge.html.erb | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 2dc6b70f1..0b7c8ebcf 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -24,7 +24,7 @@
     <%= render "cards/display/common/background", card: card %>
 
     <% if card.considering? && card.auto_close_remind? %>
-      <%= render "cards/display/preview/badge", top: "closes in", days: card.auto_close_days_until, bottom: "days" %>
+      <%= render "cards/display/preview/badge", label: "Closes in", days: card.auto_close_days_until %>
     <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/cards/display/preview/_badge.html.erb b/app/views/cards/display/preview/_badge.html.erb
index ed58db664..713949227 100644
--- a/app/views/cards/display/preview/_badge.html.erb
+++ b/app/views/cards/display/preview/_badge.html.erb
@@ -3,7 +3,7 @@
     <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 %>
+        <%= label %>
       </textPath>
     </text>
   </svg>
@@ -16,7 +16,7 @@
     <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 %>
+        Days
       </textPath>
     </text>
   </svg>

From 7f944b601f1432e54817a3d40d50cbccd11edbc2 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 16 Apr 2025 09:49:42 -0500
Subject: [PATCH 06/14] Remove unused DaysUntilFormatter

---
 .../controllers/local_time_controller.js           | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/app/javascript/controllers/local_time_controller.js b/app/javascript/controllers/local_time_controller.js
index a36ac305b..3bc77b769 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", "daysuntil" ]
+  static targets = [ "time", "date", "datetime", "shortdate", "ago", "indays", "daysago" ]
 
   #timer
 
@@ -14,7 +14,6 @@ export default class extends Controller {
     this.agoFormatter = new AgoFormatter()
     this.daysagoFormatter = new DaysAgoFormatter()
     this.indaysFormatter = new InDaysFormatter()
-    this.daysuntilFormatter = new DaysUntilFormatter()
   }
 
   connect() {
@@ -61,10 +60,6 @@ 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)
@@ -126,13 +121,6 @@ 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>`
 }

From 6fb69294a3c547bf01f93f7c86853a5b98599ad6 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 16 Apr 2025 10:14:24 -0500
Subject: [PATCH 07/14] Smaller badge size

---
 app/assets/stylesheets/cards.css | 11 ++++++-----
 app/models/card/closeable.rb     |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index c6eede99d..3e381f57f 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -214,14 +214,14 @@
   }
 
   .card__badge {
-    --size: 5cqi;
+    --size: 4cqi;
 
-    border: 1px solid currentColor;
+    border: 1.5px solid currentColor;
     block-size: var(--size);
     border-radius: 50%;
     color: var(--color-negative);
     container-type: inline-size;
-    font-size: 1.5rem;
+    font-size: 1.75rem;
     font-weight: bold;
     inset: 50% auto auto -0.5ch;
     inline-size: var(--size);
@@ -233,7 +233,8 @@
     span {
       display: grid;
       inset: 0;
-      font-size: 45cqi;
+      font-size: 40cqi;
+      font-weight: 900;
       place-content: center;
       position: absolute;
       text-align: center;
@@ -241,7 +242,7 @@
 
     svg {
       display: block;
-      letter-spacing: 0.25ch;
+      letter-spacing: 0.125ch;
       text-transform: uppercase;
     }
   }
diff --git a/app/models/card/closeable.rb b/app/models/card/closeable.rb
index 5b7ab98af..7c9f8980e 100644
--- a/app/models/card/closeable.rb
+++ b/app/models/card/closeable.rb
@@ -2,7 +2,7 @@ module Card::Closeable
   extend ActiveSupport::Concern
 
   AUTO_CLOSE_AFTER = 30.days
-  AUTO_CLOSE_REMINDER = 7.days
+  AUTO_CLOSE_REMINDER = 23.days
 
   included do
     has_one :closure, dependent: :destroy

From 5ccff34e6b93d093ae98fc1c4f1a01da60a981d4 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 16 Apr 2025 10:20:16 -0500
Subject: [PATCH 08/14] Add Closes Today styles

---
 app/assets/stylesheets/cards.css | 6 ++++++
 app/models/card/closeable.rb     | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 3e381f57f..f316b1d90 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -246,4 +246,10 @@
       text-transform: uppercase;
     }
   }
+
+  .card__badge--today {
+    span {
+      font-size: 30cqi;
+    }
+  }
 }
diff --git a/app/models/card/closeable.rb b/app/models/card/closeable.rb
index 7c9f8980e..5b7ab98af 100644
--- a/app/models/card/closeable.rb
+++ b/app/models/card/closeable.rb
@@ -2,7 +2,7 @@ module Card::Closeable
   extend ActiveSupport::Concern
 
   AUTO_CLOSE_AFTER = 30.days
-  AUTO_CLOSE_REMINDER = 23.days
+  AUTO_CLOSE_REMINDER = 7.days
 
   included do
     has_one :closure, dependent: :destroy

From 5eccad2659b03265a004f7a4ace0d469b6cf707c Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 16 Apr 2025 10:23:58 -0500
Subject: [PATCH 09/14] Pluralize "Day"

---
 app/views/cards/display/preview/_badge.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/cards/display/preview/_badge.html.erb b/app/views/cards/display/preview/_badge.html.erb
index 713949227..48d3fe4ce 100644
--- a/app/views/cards/display/preview/_badge.html.erb
+++ b/app/views/cards/display/preview/_badge.html.erb
@@ -16,7 +16,7 @@
     <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">
-        Days
+        <%= "Day".pluralize(days) %>
       </textPath>
     </text>
   </svg>

From 78941e506822354f965014a4d69ef36bef6f3aec Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 1 May 2025 09:58:23 +0200
Subject: [PATCH 10/14] Address PR feedback

---
 app/models/card/closeable.rb              | 11 +++++------
 app/views/cards/display/_preview.html.erb |  4 ++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/models/card/closeable.rb b/app/models/card/closeable.rb
index 5b7ab98af..2fec6ba6f 100644
--- a/app/models/card/closeable.rb
+++ b/app/models/card/closeable.rb
@@ -2,7 +2,7 @@ module Card::Closeable
   extend ActiveSupport::Concern
 
   AUTO_CLOSE_AFTER = 30.days
-  AUTO_CLOSE_REMINDER = 7.days
+  AUTO_CLOSE_REMINDER_BEFORE = 7.days
 
   included do
     has_one :closure, dependent: :destroy
@@ -26,13 +26,12 @@ 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
+  def days_until_close
+    (auto_close_at.to_date - Date.current).to_i if auto_close_at
   end
 
-  def auto_close_remind?
-    auto_close_days_until <= AUTO_CLOSE_REMINDER / 1.day
+  def closing_soon?
+    considering? && Time.current >= auto_close_at - AUTO_CLOSE_REMINDER_BEFORE
   end
 
   def closed?
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 0b7c8ebcf..cdfe91764 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -23,8 +23,8 @@
 
     <%= render "cards/display/common/background", card: card %>
 
-    <% if card.considering? && card.auto_close_remind? %>
-      <%= render "cards/display/preview/badge", label: "Closes in", days: card.auto_close_days_until %>
+    <% if card.closing_soon? %>
+      <%= render "cards/display/preview/badge", label: "Closes in", days: card.days_until_close %>
     <% end %>
   <% end %>
 <% end %>

From 6c7de5413729574c55583a6c4c0cdb0311b64860 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 1 May 2025 10:12:22 +0200
Subject: [PATCH 11/14] Rename 'badge' to 'bubble'

---
 app/assets/stylesheets/cards.css                              | 4 ++--
 app/assets/stylesheets/pins.css                               | 2 +-
 app/models/card/closeable.rb                                  | 2 +-
 app/views/cards/display/_preview.html.erb                     | 2 +-
 .../display/preview/{_badge.html.erb => _bubble.html.erb}     | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)
 rename app/views/cards/display/preview/{_badge.html.erb => _bubble.html.erb} (90%)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index be10a0a52..01d43ca31 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -268,7 +268,7 @@
       2px 2px 0 var(--card-color);
   }
 
-  .card__badge {
+  .card__bubble {
     --size: 4cqi;
 
     border: 1.5px solid currentColor;
@@ -302,7 +302,7 @@
     }
   }
 
-  .card__badge--today {
+  .card__bubble--today {
     span {
       font-size: 30cqi;
     }
diff --git a/app/assets/stylesheets/pins.css b/app/assets/stylesheets/pins.css
index d14ee1e28..46e50414a 100644
--- a/app/assets/stylesheets/pins.css
+++ b/app/assets/stylesheets/pins.css
@@ -80,7 +80,7 @@
       position: absolute;
     }
 
-    .card__badge {
+    .card__bubble {
       display: none;
     }
   }
diff --git a/app/models/card/closeable.rb b/app/models/card/closeable.rb
index 5f69e39bb..9d83ad9c8 100644
--- a/app/models/card/closeable.rb
+++ b/app/models/card/closeable.rb
@@ -2,7 +2,7 @@ module Card::Closeable
   extend ActiveSupport::Concern
 
   AUTO_CLOSE_AFTER = 30.days
-  AUTO_CLOSE_REMINDER_BEFORE = 7.days
+  AUTO_CLOSE_REMINDER_BEFORE = 30.days
 
   included do
     has_one :closure, dependent: :destroy
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 6a550c15b..316c20a17 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -26,7 +26,7 @@
     <%= render "cards/display/common/background", card: card %>
 
     <% if card.closing_soon? %>
-      <%= render "cards/display/preview/badge", label: "Closes in", days: card.days_until_close %>
+      <%= render "cards/display/preview/bubble", label: "Closes in", days: card.days_until_close %>
     <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/cards/display/preview/_badge.html.erb b/app/views/cards/display/preview/_bubble.html.erb
similarity index 90%
rename from app/views/cards/display/preview/_badge.html.erb
rename to app/views/cards/display/preview/_bubble.html.erb
index 48d3fe4ce..1b90ae83c 100644
--- a/app/views/cards/display/preview/_badge.html.erb
+++ b/app/views/cards/display/preview/_bubble.html.erb
@@ -1,4 +1,4 @@
-<div class="card__badge">
+<div class="card__bubble">
   <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">
@@ -8,7 +8,7 @@
     </text>
   </svg>
 
-  <span class="circle-badge__number">
+  <span class="circle-bubble__number">
     <%= days %>
   </span>
 

From 73c8a25808408e324737366bbcca6447b4378aca Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 1 May 2025 11:19:52 +0200
Subject: [PATCH 12/14] Bubble CSS

---
 app/assets/stylesheets/cards.css | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 01d43ca31..e492a017b 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -269,20 +269,25 @@
   }
 
   .card__bubble {
-    --size: 4cqi;
+    --size: 5cqi;
 
-    border: 1.5px solid currentColor;
+    background:
+      /* Iridescent color swirl */
+      radial-gradient(circle at 60% 40%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.0) 40%),
+      radial-gradient(circle at 70% 70%, rgba(255,182,193,0.5) 0%, rgba(173,216,230,0.5) 40%, rgba(144,238,144,0.2) 60%, rgba(255,255,224,0.2) 80%, rgba(255,255,255,0.0) 100%),
+      radial-gradient(circle at 30% 70%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.0) 50%),
+      radial-gradient(circle at 50% 50%, rgba(176,224,230,0.4) 0%, rgba(255,182,193,0.2) 60%, rgba(255,255,255,0.0) 100%);
+    box-shadow: 0 0 4px 2px rgba(100,150,255,0.1) inset;
     block-size: var(--size);
-    border-radius: 50%;
-    color: var(--color-negative);
+    border-radius: 42% 72% 68% 43% / 53% 73% 45% 67%;
+    padding: 0.5cqi;
+    /* color: var(--color-negative); */
     container-type: inline-size;
     font-size: 1.75rem;
     font-weight: bold;
-    inset: 50% auto auto -0.5ch;
     inline-size: var(--size);
-    padding: calc(var(--size) * 0.05);
+    inset: 50% auto auto -0.5ch;
     position: absolute;
-    transform: rotate(-10deg);
     translate: -100% -50%;
 
     span {

From e3ed381621f59d15f2eed06fbd166ecbf79f7854 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 1 May 2025 11:35:50 +0200
Subject: [PATCH 13/14] Variable bubble shapes

---
 app/assets/stylesheets/cards.css | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index e492a017b..b74e76fba 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -174,7 +174,7 @@
     box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-canvas));
     color: var(--btn-color);
     font-weight: 700;
-    
+
   }
 
   .card__move-button {
@@ -269,19 +269,30 @@
   }
 
   .card__bubble {
+    --bubble-shape: 42% 72% 68% 43% / 53% 73% 45% 67%;
     --size: 5cqi;
 
     background:
-      /* Iridescent color swirl */
-      radial-gradient(circle at 60% 40%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.0) 40%),
-      radial-gradient(circle at 70% 70%, rgba(255,182,193,0.5) 0%, rgba(173,216,230,0.5) 40%, rgba(144,238,144,0.2) 60%, rgba(255,255,224,0.2) 80%, rgba(255,255,255,0.0) 100%),
-      radial-gradient(circle at 30% 70%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.0) 50%),
-      radial-gradient(circle at 50% 50%, rgba(176,224,230,0.4) 0%, rgba(255,182,193,0.2) 60%, rgba(255,255,255,0.0) 100%);
-    box-shadow: 0 0 4px 2px rgba(100,150,255,0.1) inset;
+      radial-gradient(circle at 60% 40%,
+        oklch(var(--lch-ink-inverted)/80%) 0%,
+        oklch(var(--lch-ink-inverted)/0%) 40%),
+      radial-gradient(circle at 70% 70%,
+        oklch(var(--lch-red-medium)/40%) 0%,
+        oklch(var(--lch-purple-medium)/30%) 40%,
+        oklch(var(--lch-green-medium)/10%) 60%,
+        oklch(var(--lch-yellow-medium)/10%) 80%,
+        oklch(var(--lch-ink-inverted)/0%) 100%),
+      radial-gradient(circle at 30% 70%,
+        oklch(var(--lch-ink-inverted)/30%) 0%,
+        oklch(var(--lch-ink-inverted)/0%) 50%),
+      radial-gradient(circle at 50% 50%,
+        oklch(var(--lch-blue-medium)/50%) 0%,
+        oklch(var(--lch-pink-medium)/10%) 60%,
+        oklch(var(--lch-ink-inverted)/0%) 100%);
+    box-shadow: 0 0 4px 2px oklch(var(--lch-blue-medium)/0.2) inset;
     block-size: var(--size);
-    border-radius: 42% 72% 68% 43% / 53% 73% 45% 67%;
+    border-radius: var(--bubble-shape);
     padding: 0.5cqi;
-    /* color: var(--color-negative); */
     container-type: inline-size;
     font-size: 1.75rem;
     font-weight: bold;
@@ -305,6 +316,9 @@
       letter-spacing: 0.125ch;
       text-transform: uppercase;
     }
+
+    .card:nth-child(2n+1) & { --bubble-shape: 70% 72% 39% 80% / 74% 73% 64% 51%; }
+    .card:nth-child(3n+1) & { --bubble-shape: 45% 72% 65% 50% / 41% 73% 44% 72%; }
   }
 
   .card__bubble--today {

From 7580b331709dba1780128b21fe12efcb09c7d813 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 6 May 2025 15:24:11 -0500
Subject: [PATCH 14/14] Subtler bubble styles

---
 app/assets/stylesheets/animation.css |  9 ++++++
 app/assets/stylesheets/cards.css     | 48 +++++++++++++---------------
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css
index c99081856..656f1ae76 100644
--- a/app/assets/stylesheets/animation.css
+++ b/app/assets/stylesheets/animation.css
@@ -26,4 +26,13 @@
     50% { transform: translateX(-1rem); }
     75% { transform: translateX(1rem); }
   }
+
+  @keyframes wobble {
+    0%  { transform: rotate(calc(var(--bubble-rotate) + 30deg)); }
+    15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
+    25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
+    33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
+    50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
+    75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
+  }
 }
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index b74e76fba..97d3b86a5 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -59,7 +59,7 @@
       transition: opacity 0.2s ease-in-out;
     }
 
-    @media (hover: hover) {
+    @media (any-hover: hover) {
       .card:hover & {
         img:not([src=""]) {
           opacity: 1;
@@ -269,43 +269,41 @@
   }
 
   .card__bubble {
-    --bubble-shape: 42% 72% 68% 43% / 53% 73% 45% 67%;
+    --bubble-color: radial-gradient(oklch(var(--lch-blue-medium) / 10%) 50%, oklch(var(--lch-blue-medium) / 50%) 100%);
+    --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
+    --bubble-rotate: 0deg;
     --size: 5cqi;
 
-    background:
-      radial-gradient(circle at 60% 40%,
-        oklch(var(--lch-ink-inverted)/80%) 0%,
-        oklch(var(--lch-ink-inverted)/0%) 40%),
-      radial-gradient(circle at 70% 70%,
-        oklch(var(--lch-red-medium)/40%) 0%,
-        oklch(var(--lch-purple-medium)/30%) 40%,
-        oklch(var(--lch-green-medium)/10%) 60%,
-        oklch(var(--lch-yellow-medium)/10%) 80%,
-        oklch(var(--lch-ink-inverted)/0%) 100%),
-      radial-gradient(circle at 30% 70%,
-        oklch(var(--lch-ink-inverted)/30%) 0%,
-        oklch(var(--lch-ink-inverted)/0%) 50%),
-      radial-gradient(circle at 50% 50%,
-        oklch(var(--lch-blue-medium)/50%) 0%,
-        oklch(var(--lch-pink-medium)/10%) 60%,
-        oklch(var(--lch-ink-inverted)/0%) 100%);
-    box-shadow: 0 0 4px 2px oklch(var(--lch-blue-medium)/0.2) inset;
     block-size: var(--size);
-    border-radius: var(--bubble-shape);
-    padding: 0.5cqi;
     container-type: inline-size;
     font-size: 1.75rem;
     font-weight: bold;
     inline-size: var(--size);
     inset: 50% auto auto -0.5ch;
+    padding: 0.5cqi;
     position: absolute;
     translate: -100% -50%;
 
+    &:before {
+      background: var(--bubble-color);
+      border-radius: var(--bubble-shape);
+      content: "";
+      inset: 0;
+      position: absolute;
+      transform: rotate(var(--bubble-rotate));
+    }
+
+    @media (any-hover: hover) {
+      &:hover:before {
+        animation: wobble 1200ms;
+      }
+    }
+
     span {
       display: grid;
-      inset: 0;
       font-size: 40cqi;
       font-weight: 900;
+      inset: 0;
       place-content: center;
       position: absolute;
       text-align: center;
@@ -317,8 +315,8 @@
       text-transform: uppercase;
     }
 
-    .card:nth-child(2n+1) & { --bubble-shape: 70% 72% 39% 80% / 74% 73% 64% 51%; }
-    .card:nth-child(3n+1) & { --bubble-shape: 45% 72% 65% 50% / 41% 73% 44% 72%; }
+    .card:nth-child(2n+1) & { --bubble-rotate: -90deg; }
+    .card:nth-child(3n+1) & { --bubble-rotate: 45deg; }
   }
 
   .card__bubble--today {