From 9d706902e85fec7989435fb7623a65da03a22d11 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 5 Jun 2025 16:25:21 -0500
Subject: [PATCH] Style stalled bubble

---
 app/helpers/entropy_helper.rb                    |  3 ++-
 app/javascript/controllers/bubble_controller.js  |  6 +++++-
 app/views/cards/display/preview/_bubble.html.erb | 16 +++++++++++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/helpers/entropy_helper.rb b/app/helpers/entropy_helper.rb
index 83fcf30be..c9cb66699 100644
--- a/app/helpers/entropy_helper.rb
+++ b/app/helpers/entropy_helper.rb
@@ -15,7 +15,8 @@ module EntropyHelper
     if card.last_activity_spike_at
       {
         stalledAfterDays: card.entropy.days_before_reminder,
-        lastActivitySpikeAt: card.last_activity_spike_at.iso8601
+        lastActivitySpikeAt: card.last_activity_spike_at.iso8601,
+        action: "Stalled"
       }
     end
   end
diff --git a/app/javascript/controllers/bubble_controller.js b/app/javascript/controllers/bubble_controller.js
index 4b2a7a66c..e841ffaab 100644
--- a/app/javascript/controllers/bubble_controller.js
+++ b/app/javascript/controllers/bubble_controller.js
@@ -56,7 +56,11 @@ export default class extends Controller {
   }
 
   #showStalled() {
-    this.#toggleDisplayedContainer(false)
+    this.entropyTopTarget.innerHTML = "Stalled for"
+    this.entropyDaysTarget.innerHTML = signedDifferenceInDays(new Date(this.stalledValue.lastActivitySpikeAt), new Date())
+    this.entropyBottomTarget.innerHTML = "days"
+
+    this.#toggleDisplayedContainer(true)
   }
 
   #hide() {
diff --git a/app/views/cards/display/preview/_bubble.html.erb b/app/views/cards/display/preview/_bubble.html.erb
index 68a59c2f9..d7c29717a 100644
--- a/app/views/cards/display/preview/_bubble.html.erb
+++ b/app/views/cards/display/preview/_bubble.html.erb
@@ -25,6 +25,20 @@
   </div>
 
   <div data-bubble-target="stalled">
-    😴
+    <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" data-bubble-target="entropyTop"></textPath>
+      </text>
+    </svg>
+
+    <span class="bubble__number" data-bubble-target="entropyDays"></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" data-bubble-target="entropyBottom"></textPath>
+      </text>
+    </svg>
   </div>
 <% end %>