Toggle entropy/stalled container in the bubbles controller

app/helpers/entropy_helper.rb

@@ -11,6 +11,15 @@ module EntropyHelper
     }
   end
 
+  def stalled_bubble_options_for(card)
+    if card.last_activity_spike_at
+      {
+        stalledAfterDays: Card::Stallable::STALLED_AFTER_LAST_SPIKE_PERIOD.in_days.to_i,
+        lastActivitySpikeAt: card.last_activity_spike_at.iso8601
+      }
+    end
+  end
+
   def card_entropy_action(card)
     if card.doing?
       "Falls Back"

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)
   }

app/views/cards/display/preview/_bubble.html.erb

@@ -2,7 +2,8 @@
       data: {
             controller: "bubble",
             action: "turbo:morph-element->bubble#update",
-            bubble_entropy_value: entropy_bubble_options_for(card).to_json
+            bubble_entropy_value: entropy_bubble_options_for(card).to_json,
+            bubble_stalled_value: stalled_bubble_options_for(card).to_json
       } do %>
 
   <div data-bubble-target="entropy">
@@ -25,5 +26,6 @@
   </div>
 
   <div data-bubble-target="stalled">
+    😴
   </div>
 <% end %>