Added the display

module/applications/ui/countdowns.mjs

@@ -60,7 +60,9 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
     async _renderFrame(options) {
         const frame = await super._renderFrame(options);
 
-        frame.classList.add('effects-present');
+        if (game.system.api.applications.ui.DhEffectsDisplay.getTokenEffects().length > 0) {
+            frame.classList.add('effects-present');
+        }
 
         const iconOnly =
             game.user.getFlag(CONFIG.DH.id, CONFIG.DH.FLAGS.userFlags.countdownMode) ===
@@ -152,6 +154,11 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
         if (refreshType === RefreshType.Countdown) this.render();
     };
 
+    effectDisplayToggle = (hidden, _token) => {
+        if (hidden) this.element.classList.remove('effects-present');
+        else this.element.classList.add('effects-present');
+    };
+
     static canPerformEdit() {
         if (game.user.isGM) return true;
 
@@ -236,6 +243,7 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
     }
 
     setupHooks() {
+        Hooks.on(CONFIG.DH.HOOKS.effectDisplayToggle, this.effectDisplayToggle.bind());
         Hooks.on(socketEvent.Refresh, this.cooldownRefresh.bind());
     }
 
@@ -243,6 +251,7 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
         /* Opt out of Foundry's standard behavior of closing all application windows marked as UI when Escape is pressed */
         if (options.closeKey) return;
 
+        Hooks.off(CONFIG.DH.HOOKS.effectDisplayToggle, this.effectDisplayToggle);
         Hooks.off(socketEvent.Refresh, this.cooldownRefresh);
         return super.close(options);
     }

module/applications/ui/effectsDisplay.mjs

@@ -1,5 +1,3 @@
-import { emitAsGM, GMUpdateEvent, RefreshType, socketEvent } from '../../systemRegistration/socket.mjs';
-
 const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
 
 /**
@@ -46,35 +44,25 @@ export default class DhEffectsDisplay extends HandlebarsApplicationMixin(Applica
         return this.element.classList.contains('hidden');
     }
 
-    // /**@inheritdoc */
-    // async _renderFrame(options) {
-    //     const frame = await super._renderFrame(options);
+    _attachPartListeners(partId, htmlElement, options) {
+        super._attachPartListeners(partId, htmlElement, options);
 
-    //     const header = frame.querySelector('.window-header');
-    //     header.querySelector('button[data-action="close"]').remove();
-
-    //     if (game.user.isGM) {
-    //         const editTooltip = game.i18n.localize('DAGGERHEART.APPLICATIONS.CountdownEdit.editTitle');
-    //         const editButton = `<a style="margin-right: 8px;" class="header-control" data-tooltip="${editTooltip}" aria-label="${editTooltip}" data-action="editCountdowns"><i class="fa-solid fa-wrench"></i></a>`;
-    //         header.insertAdjacentHTML('beforeEnd', editButton);
-    //     }
-
-    //     const minimizeTooltip = game.i18n.localize('DAGGERHEART.UI.Countdowns.toggleIconMode');
-    //     const minimizeButton = `<a class="header-control" data-tooltip="${minimizeTooltip}" aria-label="${minimizeTooltip}" data-action="toggleViewMode"><i class="fa-solid fa-down-left-and-up-right-to-center"></i></a>`;
-    //     header.insertAdjacentHTML('beforeEnd', minimizeButton);
-
-    //     return frame;
-    // }
+        if (this.element) {
+            this.element.querySelectorAll('.effect-container').forEach(element => {
+                element.addEventListener('contextmenu', this.removeEffect.bind(this));
+            });
+        }
+    }
 
     /** @override */
     async _prepareContext(options) {
         const context = await super._prepareContext(options);
-        context.effects = this.getTokenEffects();
+        context.effects = DhEffectsDisplay.getTokenEffects();
 
         return context;
     }
 
-    getTokenEffects = token => {
+    static getTokenEffects = token => {
         const actor = token
             ? token.actor
             : canvas.tokens.controlled.length === 0
@@ -82,18 +70,28 @@ export default class DhEffectsDisplay extends HandlebarsApplicationMixin(Applica
                   ? game.user.character
                   : null
               : canvas.tokens.controlled[0].actor;
-        return actor?.effects ?? [];
+        return actor?.effects ? Array.from(actor.effects) : [];
     };
 
     toggleHidden(token, focused) {
-        const effects = this.getTokenEffects(focused ? token : null);
-        this.element.hidden = !focused || effects.size === 0;
-        if (effects.size > 0) this.render();
+        const effects = DhEffectsDisplay.getTokenEffects(focused ? token : null);
+        this.element.hidden = effects.length === 0;
+
+        Hooks.callAll(CONFIG.DH.HOOKS.effectDisplayToggle, this.element.hidden, token);
+
+        if (effects.length > 0) this.render();
+    }
+
+    async removeEffect(event) {
+        const element = event.target.closest('.effect-container');
+        const effects = DhEffectsDisplay.getTokenEffects();
+        const effect = effects.find(x => x.id === element.id);
+        await effect.delete();
+        this.render();
     }
 
     setupHooks() {
         Hooks.on('controlToken', this.toggleHidden.bind(this));
-        // Hooks.on(socketEvent.Refresh, this.cooldownRefresh.bind());
     }
 
     async close(options) {
@@ -101,7 +99,6 @@ export default class DhEffectsDisplay extends HandlebarsApplicationMixin(Applica
         if (options.closeKey) return;
 
         Hooks.off('controlToken', this.toggleHidden);
-        // Hooks.off(socketEvent.Refresh, this.cooldownRefresh);
         return super.close(options);
     }
 

module/config/_module.mjs

@@ -4,6 +4,7 @@ export * as domainConfig from './domainConfig.mjs';
 export * as effectConfig from './effectConfig.mjs';
 export * as flagsConfig from './flagsConfig.mjs';
 export * as generalConfig from './generalConfig.mjs';
+export * as hooksConfig from './hooksConfig.mjs';
 export * as itemConfig from './itemConfig.mjs';
 export * as settingsConfig from './settingsConfig.mjs';
 export * as systemConfig from './system.mjs';

module/config/hooksConfig.mjs

@@ -0,0 +1,5 @@
+const hooksConfig = {
+    effectDisplayToggle: 'DHEffectDisplayToggle'
+};
+
+export default hooksConfig;

module/config/system.mjs

@@ -6,7 +6,8 @@ import * as SETTINGS from './settingsConfig.mjs';
 import * as EFFECTS from './effectConfig.mjs';
 import * as ACTIONS from './actionConfig.mjs';
 import * as FLAGS from './flagsConfig.mjs';
-import * as ITEMBROWSER from './itemBrowserConfig.mjs'
+import HOOKS from './hooksConfig.mjs';
+import * as ITEMBROWSER from './itemBrowserConfig.mjs';
 
 export const SYSTEM_ID = 'daggerheart';
 
@@ -20,5 +21,6 @@ export const SYSTEM = {
     EFFECTS,
     ACTIONS,
     FLAGS,
+    HOOKS,
     ITEMBROWSER
 };

module/documents/tooltipManager.mjs

@@ -1,8 +1,26 @@
 export default class DhTooltipManager extends foundry.helpers.interaction.TooltipManager {
+    #bordered = false;
+
     async activate(element, options = {}) {
         const { TextEditor } = foundry.applications.ux;
 
         let html = options.html;
+        if (element.dataset.tooltip === '#effect-display#') {
+            this.#bordered = true;
+            const effect = await foundry.utils.fromUuid(element.dataset.uuid);
+            html = await foundry.applications.handlebars.renderTemplate(
+                `systems/daggerheart/templates/ui/tooltip/effect-display.hbs`,
+                {
+                    effect
+                }
+            );
+
+            this.tooltip.innerHTML = html;
+            options.direction = this._determineItemTooltipDirection(element);
+        } else {
+            this.#bordered = false;
+        }
+
         if (element.dataset.tooltip?.startsWith('#item#')) {
             const itemUuid = element.dataset.tooltip.slice(6);
             const item = await foundry.utils.fromUuid(itemUuid);
@@ -112,6 +130,14 @@ export default class DhTooltipManager extends foundry.helpers.interaction.Toolti
         super.activate(element, { ...options, html: html });
     }
 
+    _setStyle(position = {}) {
+        super._setStyle(position);
+
+        if (this.#bordered) {
+            this.tooltip.classList.add('bordered-tooltip');
+        }
+    }
+
     _determineItemTooltipDirection(element, prefered = this.constructor.TOOLTIP_DIRECTIONS.LEFT) {
         const pos = element.getBoundingClientRect();
         const dirs = this.constructor.TOOLTIP_DIRECTIONS;