Corrected ActiveEffect template styling and added useage of the new 'showIcon' property

module/applications/sheets-configs/activeEffectConfig.mjs

@@ -151,12 +151,15 @@ export default class DhActiveEffectConfig extends foundry.applications.sheets.Ac
                 index,
                 defaultPriority
             ) ??
-            renderTemplate('systems/daggerheart/templates/sheets/activeEffect/change.hbs', {
+            foundry.applications.handlebars.renderTemplate(
-                change,
+                'systems/daggerheart/templates/sheets/activeEffect/change.hbs',
-                index,
+                {
-                defaultPriority,
+                    change,
-                fields
+                    index,
-            })
+                    defaultPriority,
+                    fields
+                }
+            )
         );
     }
 }

module/applications/ui/effectsDisplay.mjs

@@ -1,3 +1,4 @@
+import { getIconVisibleActiveEffects } from '../../helpers/utils.mjs';
 import { RefreshType } from '../../systemRegistration/socket.mjs';
 
 const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
@@ -72,7 +73,7 @@ export default class DhEffectsDisplay extends HandlebarsApplicationMixin(Applica
                   ? game.user.character
                   : null
               : canvas.tokens.controlled[0].actor;
-        return actor?.getActiveEffects() ?? [];
+        return getIconVisibleActiveEffects(actor?.getActiveEffects() ?? []);
     };
 
     toggleHidden(token, focused) {

module/canvas/placeables/token.mjs

@@ -1,3 +1,4 @@
+import { getIconVisibleActiveEffects } from '../../helpers/utils.mjs';
 import DhMeasuredTemplate from './measuredTemplate.mjs';
 
 export default class DhTokenPlaceable extends foundry.canvas.placeables.Token {
@@ -20,7 +21,7 @@ export default class DhTokenPlaceable extends foundry.canvas.placeables.Token {
         this.effects.overlay = null;
 
         // Categorize effects
-        const activeEffects = this.actor?.getActiveEffects() ?? [];
+        const activeEffects = getIconVisibleActiveEffects(Array.from(this.actor?.allApplicableEffects() ?? []));
         const overlayEffect = activeEffects.findLast(e => e.img && e.getFlag?.('core', 'overlay'));
 
         // Draw effects

module/helpers/utils.mjs

@@ -500,3 +500,12 @@ export function htmlToText(html) {
 
     return tempDivElement.textContent || tempDivElement.innerText || '';
 }
+
+export function getIconVisibleActiveEffects(effects) {
+    return effects.filter(effect => {
+        const alwaysShown = effect.showIcon === CONST.ACTIVE_EFFECT_SHOW_ICON.ALWAYS;
+        const conditionalShown = effect.showIcon === CONST.ACTIVE_EFFECT_SHOW_ICON.CONDITIONAL && !effect.transfer; // TODO: system specific logic
+
+        return !effect.disabled && (alwaysShown || conditionalShown);
+    });
+}

styles/less/sheets/activeEffects/activeEffects.less

@@ -0,0 +1,11 @@
+.application.sheet.daggerheart.dh-style.active-effect-config {
+    .tab.changes {
+        gap: 0;
+
+        header {
+            div {
+                text-align: center;
+            }
+        }
+    }
+}

styles/less/sheets/index.less

@@ -42,3 +42,5 @@
 
 @import './rollTables/sheet.less';
 @import './actions/actions.less';
+
+@import './activeEffects/activeEffects.less';

templates/sheets/activeEffect/change.hbs

@@ -1,6 +1,6 @@
 <li data-index="{{index}}">
     <div class="key">
-        {{formInput fields.key name=change.keyPath value=change.key}}
+        <input type="text" class="effect-change-input" name="{{change.keyPath}}" value="{{change.key}}" />
     </div>
     <div class="type">
         {{formInput fields.type name=change.typePath value=change.type localize=true}}
@@ -12,6 +12,6 @@
         {{formInput fields.priority name=change.priorityPath value=change.priority placeholder=defaultPriority}}
     </div>
     <div class="controls">
-        <button type="button" class="inline-control icon fa-solid fa-trash" data-action="deleteChange"></button>
+        <a class="inline-control icon" data-action="deleteChange"><i class="fa-solid fa-trash"></i></a>
     </div>
 </li>

templates/sheets/activeEffect/changes.hbs

@@ -5,7 +5,7 @@
         <div class="value">{{localize "EFFECT.FIELDS.changes.element.value.label"}}</div>
         <div class="priority">{{localize "EFFECT.FIELDS.changes.element.priority.label"}}</div>
         <div class="controls">
-            <button type="button" class="inline-control icon fa-regular fa-square-plus" data-action="addChange"></button>
+            <a class="inline-control icon" data-action="addChange"><i class="fa-regular fa-square-plus"></i></a>
         </div>
     </header>
     <ol class="scrollable" data-changes>

templates/sheets/activeEffect/details.hbs

@@ -4,7 +4,12 @@
     {{formGroup fields.disabled value=source.disabled rootId=rootId}}
 
     {{#if isActorEffect}}
-        {{formGroup fields.origin value=source.origin rootId=rootId disabled=true}}
+        <div class="form-group">
+            <label>{{localize "EFFECT.FIELDS.origin.label"}}</label>
+            <div class="form-fields">
+                <input type="text" value="{{source.origin}}" disabled />
+            </div>
+        </div>
     {{/if}}
     
     {{#if isItemEffect}}