[#6813] Add expanded section showing effect changes & description (#6820)

* [#6813] Add expanded section showing effect changes & description

Adds the ability to expand active effects on actor and items
sheets to display a list of their changes as well as the effect's
description and tags.

The change rows display the key (with a human-readable name if
available), the change type indicated by a symbol, and the value
(displayed as tooltip instead if too long).

This includes improvements to `getHumanReadableAttributeLabel`
to support displaying as many active effect change keys as
possible and to improve how certain keys are displayed:
- Support `activities[attack]...` style keys
- Support generic item keys that search through all item schemas
- Improved labels within `MappingField` to include entry name

Closes #6813

* [#6813] Improve labels for AC & concentration keys, fix bugs

* [#6813] Add labels to non-persisted fields

* [#6813] Add status indicator to changes to prepare for conditions

* Style pass. Fix restoring container content expanded state on re-render.

* [#6813] Fix issues, handle summary secrets, adjust localization

---------

Co-authored-by: Kim Mantas <kim.mantas@gmail.com>

Author: arbron

lang/en.json

@@ -2044,19 +2044,24 @@ dialog.dnd5e2.application {
 /* ---------------------------------- */
 
 .dnd5e2 .collapsible, .collapsible.dnd5e2-collapsible {
-  &.collapsed {
-    .fa-caret-down { transform: rotate(-90deg); }
-    .collapsible-content { grid-template-rows: 0fr; }
-  }
   .fa-caret-down { transition: transform 250ms ease; }
   .collapsible-content {
     display: grid;
-    grid-template-rows: 1fr;
     transition: grid-template-rows 250ms ease;
     > .wrapper { overflow: hidden; }
   }
 }
 
+@scope (.dnd5e2 .collapsible, .dnd5e2-collapsible.collapsible) to (.collapsible) {
+  :scope:not(.collapsed) {
+    .collapsible-content { grid-template-rows: 1fr; }
+  }
+  :scope.collapsed {
+    .fa-caret-down { transform: rotate(-90deg); }
+    .collapsible-content { grid-template-rows: 0fr; }
+  }
+}
+
 /* ---------------------------------- */
 /*  Combat Tracker                    */
 /* ---------------------------------- */

less/v2/apps.less

@@ -361,8 +361,13 @@
         &.item-detail { color: var(--color-text-secondary); }
       }
 
+      /* Effect Value */
+      .effect-value {
+        width: 70px;
+      }
+
       /* Item Controls */
-      .item-controls {
+      .item-controls, .effect-controls {
         width: 70px;
         align-items: stretch;
         justify-content: center;
@@ -478,6 +483,57 @@
 
       .item-name .title { font-size: var(--font-size-12); }
     }
+
+    .changes .change-row {
+      border-block-start: var(--activity-row-border);
+      min-block-size: 32px;
+      padding-inline-start: 29px;
+      position: relative;
+
+      &:last-child { border-block-end: var(--activity-row-border); }
+
+      &::before {
+        content: "\f192";
+        position: absolute;
+        inset: 9px auto auto 13px;
+        font-family: var(--font-awesome);
+        font-size: var(--font-size-11);
+        font-weight: 900;
+        color: var(--activity-row-indent-color);
+      }
+      &[data-change-type="multiply"]::before { content: "\f057"; }
+      &[data-change-type="add"]::before { content: "\f055"; }
+      &[data-change-type="subtract"]::before { content: "\f056"; }
+      &[data-change-type="downgrade"]::before { content: "\f358"; }
+      &[data-change-type="upgrade"]::before { content: "\f35b"; }
+      &[data-change-type="override"]::before {
+        content: "\f28b";
+        rotate: 90deg;
+      }
+
+      .item-name .title {
+        font-family: var(--dnd5e-font-roboto);
+        font-size: var(--font-size-12);
+      }
+
+      .application-status { align-content: center; }
+    }
+
+    .riders .changes {
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0 auto 0 12px;
+        border-inline-start: var(--dnd5e-border-dotted);
+      }
+
+      .change-row {
+        padding-inline-start: 39px;
+        &::before { inset-inline-start: 23px; }
+      }
+    }
   }
 
   .effect-name .duration, &.effect-tooltip .duration {

less/v2/inventory.less

@@ -206,25 +206,25 @@ export default class ActivityUsageDialog extends Dialog5e {
         return {
           value: effect.id,
           label: data?.data?.name ?? this.actor.items.get(data?.id)?.name
-            ?? _loc("DND5E.ConcentratingItemless")
+            ?? _loc("DND5E.CONCENTRATION.NoSource")
         };
       });
       if ( existingConcentration.length ) {
         const optional = existingConcentration.length < (this.actor.system.attributes?.concentration?.limit ?? 0);
         context.fields.push({
           field: new StringField({
-            required: true, label: _loc("DND5E.ConcentratingEnd"), blank: optional
+            required: true, label: _loc("DND5E.CONCENTRATION.Action.End"), blank: optional
           }),
           name: "concentration.end",
           value: this.config.concentration?.end,
           options: optional ? [{ value: "", label: "—" }, ...existingConcentration] : existingConcentration
         });
         context.notes.push({
-          type: "info", message: _loc(`DND5E.ConcentratingWarnLimit${optional ? "Optional" : ""}`)
+          type: "info", message: _loc(`DND5E.CONCENTRATION.Limit.${optional ? "Optional" : "Hard"}`)
         });
       } else if ( !this.actor.system.attributes?.concentration?.limit ) {
         context.notes.push({
-          type: "warn", message: _loc("DND5E.ConcentratingWarnLimitZero")
+          type: "warn", message: _loc("DND5E.CONCENTRATION.Limit.Zero")
         });
       }
     }

module/applications/activity/activity-usage-dialog.mjs

@@ -184,6 +184,10 @@ export default class BaseActorSheet extends PrimarySheetMixin(
       parts.features.templates ??= [];
       parts.features.templates.push(...customElements.get(this.options.elements.inventory).templates);
     }
+    if ( "effects" in parts ) {
+      parts.effects.templates ??= [];
+      parts.effects.templates.push(...customElements.get(this.options.elements.effects).templates);
+    }
     return parts;
   }
 
@@ -249,26 +253,27 @@ export default class BaseActorSheet extends PrimarySheetMixin(
       return arr;
     }, []);
 
+    const columns = [EffectsElement.COLUMNS.source, EffectsElement.COLUMNS.value, EffectsElement.COLUMNS.controls];
     for ( const category of Object.values(context.effects) ) {
+      category.columns = columns;
       category.effects = await category.effects.reduce(async (arr, effect) => {
-        effect.updateDuration();
         if ( conditionIds.has(effect.id) && !effect.duration.remaining ) return arr;
-        const { id, name, img, disabled, duration } = effect;
         const toggleable = !this._concentration?.effects.has(effect);
-        let source = await effect.getSource();
+        const isExpanded = this.expandedSections.get(`effects.${effect.id}`) === true;
+        const ctx = {
+          ...(await effect.getSheetContext()), toggleable, isExpanded,
+          parentId: effect.target === effect.parent ? null : effect.parent.id,
+          expanded: isExpanded ? await effect.getPreviewContext({ secrets: effect.isOwner }) : null
+        };
         // If the source is an ActiveEffect from another Actor, note the source as that Actor instead.
-        if ( source instanceof ActiveEffect ) {
-          source = source.target;
-          if ( (source instanceof Item) && source.parent && (source.parent !== this.object) ) source = source.parent;
+        ctx.hasTooltip = ctx.source instanceof dnd5e.documents.Item5e;
+        if ( ctx.source instanceof ActiveEffect ) {
+          const src = ctx.source;
+          ctx.source = src.target;
+          if ( (src instanceof Item) && src.parent && (src.parent !== this.object) ) ctx.source = src.parent;
         }
         arr = await arr;
-        arr.push({
-          id, name, img, disabled, duration, source, toggleable,
-          parentId: effect.target === effect.parent ? null : effect.parent.id,
-          durationParts: duration.remaining ? duration.label.split(", ") : [],
-          showDuration: Number.isFinite(duration.value),
-          hasTooltip: source instanceof dnd5e.documents.Item5e
-        });
+        arr.push(ctx);
         return arr;
       }, []);
     }
@@ -451,7 +456,7 @@ export default class BaseActorSheet extends PrimarySheetMixin(
       else await this._prepareItemFeature(item, ctx);
 
       // Handle expanded data
-      ctx.isExpanded = this.expandedSections.get(item.id) === true;
+      ctx.isExpanded = this.expandedSections.get(`items.${item.id}`) === true;
       if ( ctx.isExpanded ) ctx.expanded = await item.getChatData({ secrets: item.isOwner });
 
       // Place the item into specific categories.
@@ -1189,7 +1194,7 @@ export default class BaseActorSheet extends PrimarySheetMixin(
   /** @override */
   _addDocument(event, target) {
     if ( this.tabGroups.primary === "effects" ) return ActiveEffect.implementation.create({
-      name: _loc("DND5E.EffectNew"),
+      name: _loc("DND5E.EFFECT.New"),
       icon: "icons/svg/aura.svg"
     }, { parent: this.actor, renderSheet: true });