Toggle entropy/stalled container in the bubbles controller

app/javascript/controllers/bubble_controller.js

@@ -5,7 +5,7 @@ const REFRESH_INTERVAL = 3_600_000 // 1 hour (in milliseconds)
 
 export default class extends Controller {
   static targets = [ "entropy", "entropyTop", "entropyDays", "entropyBottom", "stalled" ]
-  static values = { entropy: Object }
+  static values = { entropy: Object, stalled: Object }
 
   #timer
 
@@ -21,30 +21,44 @@ export default class extends Controller {
   update() {
     if (this.#hasEntropy) {
       this.#showEntropy()
+    } else if (this.#isStalled) {
+      this.#showStalled()
     } else {
       this.#hide()
     }
   }
 
   get #hasEntropy() {
-    return this.#closesInDays < this.entropyValue.daysBeforeReminder
+    return this.#entropyCleanupInDays < this.entropyValue.daysBeforeReminder
   }
 
-  get #closesInDays() {
-    this.closesInDays ??= signedDifferenceInDays(new Date(), new Date(this.entropyValue.closesAt))
-    return this.closesInDays
+  get #entropyCleanupInDays() {
+    this.entropyCleanupInDays ??= signedDifferenceInDays(new Date(), new Date(this.entropyValue.closesAt))
+    return this.entropyCleanupInDays
   }
 
   #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.entropyTopTarget.innerHTML = this.#entropyCleanupInDays < 1 ? this.entropyValue.action : `${this.entropyValue.action} in`
+    this.entropyDaysTarget.innerHTML = this.#entropyCleanupInDays < 1 ? "!" : this.#entropyCleanupInDays
+    this.entropyBottomTarget.innerHTML = this.#entropyCleanupInDays < 1 ? "Today" : (this.#entropyCleanupInDays === 1 ? "day" : "days")
 
-    this.entropyTarget.removeAttribute("hidden")
-    this.stalledTarget.toggleAttribute("hidden", true)
+    this.#toggleDisplayedContainer(true)
+  }
+
+  #toggleDisplayedContainer(entropyOrStalled) {
+    this.entropyTarget.toggleAttribute("hidden", !entropyOrStalled)
+    this.stalledTarget.toggleAttribute("hidden", entropyOrStalled)
     this.#show()
   }
 
+  get #isStalled() {
+    return this.stalledValue.lastActivitySpikeAt && signedDifferenceInDays(new Date(this.stalledValue.lastActivitySpikeAt), new Date()) > this.stalledValue.stalledAfterDays
+  }
+
+  #showStalled() {
+    this.#toggleDisplayedContainer(false)
+  }
+
   #hide() {
     this.element.toggleAttribute("hidden", true)
   }