From 5ac4fc3b9ceec0f83e829295e6b197a47cdd4e01 Mon Sep 17 00:00:00 2001
From: Carlos Fernandez <CarlosFdez@users.noreply.github.com>
Date: Thu, 4 Jun 2026 05:42:17 -0400
Subject: [PATCH] [Fix] visual quirk with blur in unfocused countdown (#1970)

* Fix visual quirk with blur in unfocused countdown

* Snuck in fixes and refactors
---
 module/applications/ui/countdowns.mjs   | 22 ++++++++++++----------
 styles/less/ui/countdown/countdown.less | 13 ++++++-------
 templates/ui/countdowns.hbs             | 12 +++++++-----
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/module/applications/ui/countdowns.mjs b/module/applications/ui/countdowns.mjs
index 76e2b399..6fa05e29 100644
--- a/module/applications/ui/countdowns.mjs
+++ b/module/applications/ui/countdowns.mjs
@@ -31,9 +31,9 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
             minimizable: false
         },
         actions: {
-            toggleViewMode: DhCountdowns.#toggleViewMode,
-            editCountdowns: DhCountdowns.#editCountdowns,
-            loopCountdown: DhCountdowns.#loopCountdown,
+            toggleViewMode: DhCountdowns.#onToggleViewMode,
+            editCountdowns: DhCountdowns.#onEditCountdowns,
+            loopCountdown: DhCountdowns.#onLoopCountdown,
             decreaseCountdown: (_, target) => this.editCountdown(false, target),
             increaseCountdown: (_, target) => this.editCountdown(true, target)
         },
@@ -147,7 +147,7 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
         return true;
     }
 
-    static async #toggleViewMode() {
+    static async #onToggleViewMode() {
         const currentMode = game.user.getFlag(CONFIG.DH.id, CONFIG.DH.FLAGS.userFlags.countdownMode);
         const appMode = CONFIG.DH.GENERAL.countdownAppMode;
         const newMode = currentMode === appMode.textIcon ? appMode.iconOnly : appMode.textIcon;
@@ -158,15 +158,16 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
         this.render();
     }
 
-    static async #editCountdowns() {
+    static async #onEditCountdowns() {
         new game.system.api.applications.ui.CountdownEdit().render(true);
     }
 
-    static async #loopCountdown(_, target) {
+    static async #onLoopCountdown(_, target) {
         if (!DhCountdowns.canPerformEdit()) return;
 
         const settings = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Countdowns);
-        const countdown = settings.countdowns[target.id];
+        const countdownId = target.closest('[data-countdown]').dataset.countdown;
+        const countdown = settings.countdowns[countdownId];
 
         let progressMax = countdown.progress.start;
         let message = null;
@@ -185,7 +186,7 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
 
         await waitForDiceSoNice(message);
         await settings.updateSource({
-            [`countdowns.${target.id}.progress`]: {
+            [`countdowns.${countdownId}.progress`]: {
                 current: newMax,
                 start: newMax
             }
@@ -199,11 +200,12 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
         if (!DhCountdowns.canPerformEdit()) return;
 
         const settings = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Countdowns);
-        const countdown = settings.countdowns[target.id];
+        const countdownId = target.closest('[data-countdown]').dataset.countdown;
+        const countdown = settings.countdowns[countdownId];
         const newCurrent = increase
             ? Math.min(countdown.progress.current + 1, countdown.progress.start)
             : Math.max(countdown.progress.current - 1, 0);
-        await settings.updateSource({ [`countdowns.${target.id}.progress.current`]: newCurrent });
+        await settings.updateSource({ [`countdowns.${countdownId}.progress.current`]: newCurrent });
         await emitGMUpdate(GMUpdateEvent.UpdateCountdowns, DhCountdowns.gmSetSetting.bind(settings), settings, null, {
             refreshType: RefreshType.Countdown
         });
diff --git a/styles/less/ui/countdown/countdown.less b/styles/less/ui/countdown/countdown.less
index 66a6c88a..63e539ba 100644
--- a/styles/less/ui/countdown/countdown.less
+++ b/styles/less/ui/countdown/countdown.less
@@ -18,7 +18,7 @@
     border: 0;
     box-shadow: none;
     color: @color-text-primary;
-    width: 300px;
+    width: 18.75rem;
     pointer-events: all;
     align-self: flex-end;
     transition: 0.3s right ease-in-out;
@@ -36,7 +36,7 @@
         transition: opacity var(--ui-fade-duration);
     }
 
-    :not(.performance-low, .noblur) {
+    &:not(.performance-low, .noblur) {
         backdrop-filter: blur(5px);
     }
 
@@ -49,8 +49,7 @@
     }
 
     &.icon-only {
-        width: 180px;
-        min-width: 180px;
+        width: 12rem;
     }
 
     .countdowns-header,
@@ -108,8 +107,8 @@
                 gap: 16px;
 
                 img {
-                    width: 44px;
-                    height: 44px;
+                    width: 2.75rem;
+                    height: 2.75rem;
                     border-radius: 6px;
                 }
 
@@ -127,7 +126,7 @@
                         .countdown-tool-controls {
                             display: flex;
                             align-items: center;
-                            gap: 16px;
+                            gap: var(--spacer-12);
                         }
 
                         .progress-tag {
diff --git a/templates/ui/countdowns.hbs b/templates/ui/countdowns.hbs
index 95067826..faaffdc5 100644
--- a/templates/ui/countdowns.hbs
+++ b/templates/ui/countdowns.hbs
@@ -11,18 +11,20 @@
     </header>
     <div class="countdowns-container">
         {{#each countdowns as | countdown id |}}
-            <div class="countdown-container {{#if ../iconOnly}}icon-only{{/if}}">
+            <div class="countdown-container {{#if ../iconOnly}}icon-only{{/if}}" data-countdown="{{id}}">
                 <div class="countdown-main-container">
                     <img src="{{countdown.img}}" {{#if ../iconOnly}}data-tooltip="{{countdown.name}}"{{/if}}/>
                     <div class="countdown-content">
-                        {{#unless ../iconOnly}}<label>{{countdown.name}}</label>{{/unless}}
+                        {{#unless ../iconOnly}}
+                            <header>{{countdown.name}}</header>
+                        {{/unless}}
                         <div class="countdown-tools">
                             <div class="countdown-tool-controls">
-                                {{#if countdown.editable}}<a data-action="decreaseCountdown" id="{{id}}"><i class="fa-solid fa-minus"></i></a>{{/if}}
+                                {{#if countdown.editable}}<a data-action="decreaseCountdown"><i class="fa-solid fa-minus"></i></a>{{/if}}
                                 <div class="progress-tag">
                                     {{countdown.progress.current}}/{{countdown.progress.start}}
                                 </div>
-                                {{#if countdown.editable}}<a data-action="increaseCountdown" id="{{id}}"><i class="fa-solid fa-plus"></i></a>{{/if}}
+                                {{#if countdown.editable}}<a data-action="increaseCountdown"><i class="fa-solid fa-plus"></i></a>{{/if}}
                             </div>
                             <div class="countdown-tool-icons">
                                 {{#if (not ../iconOnly)}}
@@ -31,7 +33,7 @@
                                     {{/if}}
                                     {{#unless (eq countdown.progress.looping "noLooping")}}
                                         <span data-tooltip="{{countdown.loopTooltip}}">
-                                            <a class="looping-container {{#if countdown.shouldLoop}}should-loop{{/if}}" {{#if countdown.loopDisabled}}disabled{{/if}} data-action="loopCountdown" id="{{id}}">
+                                            <a class="looping-container {{#if countdown.shouldLoop}}should-loop{{/if}}" {{#if countdown.loopDisabled}}disabled{{/if}} data-action="loopCountdown">
                                                 <i class="loop-marker fa-solid fa-repeat"></i>
                                                 {{#if (eq countdown.progress.looping "increasing")}}
                                                     <i class="direction-marker fa-solid fa-angles-up" data-tooltip="{{localize "DAGGERHEART.UI.Countdowns.increasingLoop"}}"></i>