From bfa4dc626b2b570ac4ecabcfab45c9a875ac25fb Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Thu, 5 Jun 2025 10:39:51 +0200
Subject: [PATCH] Restructure to make it easy to extend rendering logic

---
 .../controllers/bubble_controller.js          | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/app/javascript/controllers/bubble_controller.js b/app/javascript/controllers/bubble_controller.js
index 8968aaa26..714d6d362 100644
--- a/app/javascript/controllers/bubble_controller.js
+++ b/app/javascript/controllers/bubble_controller.js
@@ -4,7 +4,7 @@ import { signedDifferenceInDays } from "helpers/date_helpers"
 const REFRESH_INTERVAL = 3_600_000 // 1 hour (in milliseconds)
 
 export default class extends Controller {
-  static targets = [ "entropy", "entropyTop", "entropyDays", "entropyBottom" ]
+  static targets = [ "entropy", "entropyTop", "entropyDays", "entropyBottom", "stalled" ]
   static values = { entropy: Object }
 
   #timer
@@ -19,22 +19,34 @@ export default class extends Controller {
   }
 
   update() {
-    const closesInDays = signedDifferenceInDays(new Date(), new Date(this.entropyValue.closesAt))
-
-    if (closesInDays > this.entropyValue.daysBeforeReminder) {
+    if (this.#hasEntropy) {
+      this.#showEntropy()
+    } else {
       this.#hide()
-      return
     }
+  }
 
-    this.entropyTopTarget.innerHTML = closesInDays < 1 ? this.entropyValue.action : `${this.entropyValue.action} in`
-    this.entropyDaysTarget.innerHTML = closesInDays < 1 ? "!" : closesInDays
-    this.entropyBottomTarget.innerHTML = closesInDays < 1 ? "Today" : (closesInDays === 1 ? "day" : "days")
+  get #hasEntropy() {
+    return this.#closesInDays < this.entropyValue.daysBeforeReminder
+  }
 
+  get #closesInDays() {
+    this.closesInDays ??= signedDifferenceInDays(new Date(), new Date(this.entropyValue.closesAt))
+    return this.closesInDays
+  }
+
+  #showEntropy() {
+    this.entropyTopTarget.innerHTML = this.#closesInDays < 1 ? this.entropyValue.action : `${this.entropyValue.action} in`
+    this.entropyDaysTarget.innerHTML = this.#closesInDays < 1 ? "!" : this.#closesInDays
+    this.entropyBottomTarget.innerHTML = this.#closesInDays < 1 ? "Today" : (this.#closesInDays === 1 ? "day" : "days")
+
+    this.entropyTarget.removeAttribute("hidden")
+    this.stalledTarget.toggleAttribute("hidden", true)
     this.#show()
   }
 
   #hide() {
-    this.element.setAttribute("hidden", "")
+    this.element.toggleAttribute("hidden", true)
   }
 
   #show() {