WIP: Add effects tab to actor sheets

src/lang/de.json

@@ -1,10 +1,11 @@
 {
-    "DS4.UserInteractionAddItem": "Neu",
-    "DS4.UserInteractionEditItem": "Bearbeiten",
-    "DS4.UserInteractionDeleteItem": "Löschen",
-    "DS4.UserInteractionAddEffect": "Neuer Effekt",
-    "DS4.UserInteractionEditEffect": "Effekt bearbeiten",
-    "DS4.UserInteractionDeleteEffect": "Effekt löschen",
+    "DS4.UserInteractionAdd": "Neu",
+    "DS4.UserInteractionAddItemTitle": "Item Erstellen",
+    "DS4.UserInteractionEditItemTitle": "Item Bearbeiten",
+    "DS4.UserInteractionDeleteItemTitle": "Item Löschen",
+    "DS4.UserInteractionAddEffectTitle": "Effekt Erstellen",
+    "DS4.UserInteractionEditEffectTitle": "Effekt Bearbeiten",
+    "DS4.UserInteractionDeleteEffectTitle": "Effekt Löschen",
     "DS4.DocumentImageAltText": "Bild von {name}",
     "DS4.RollableImageRollableTitle": "Für {name} würfeln",
     "DS4.DiceOverlayImageAltText": "Bild eines W20",
@@ -121,6 +122,10 @@
     "DS4.SpellMinimumLevelsSorcerer": "Zugangsstufe für Schwarzmagier",
     "DS4.SpellMinimumLevelsSorcererAbbr": "Zugangsstufe Sch",
     "DS4.SpellPrice": "Preis (Gold)",
+    "DS4.EffectEnabled": "Aktiv",
+    "DS4.EffectEnabledAbbr": "A",
+    "DS4.EffectLabel": "Bezeichnung",
+    "DS4.EffectSource": "Quelle",
     "DS4.ActorName": "Name",
     "DS4.ActorImageAltText": "Bild des Aktors",
     "DS4.ActorTypeCharacter": "Charakter",

src/lang/en.json

@@ -1,10 +1,11 @@
 {
-    "DS4.UserInteractionAddItem": "Add item",
-    "DS4.UserInteractionEditItem": "Edit item",
-    "DS4.UserInteractionDeleteItem": "Delete item",
-    "DS4.UserInteractionAddEffect": "Add Effect",
-    "DS4.UserInteractionEditEffect": "Edit Effect",
-    "DS4.UserInteractionDeleteEffect": "Delete Effect",
+    "DS4.UserInteractionAdd": "Add",
+    "DS4.UserInteractionAddItemTitle": "Create Item",
+    "DS4.UserInteractionEditItemTitle": "Edit Item",
+    "DS4.UserInteractionDeleteItemTitle": "Delete Item",
+    "DS4.UserInteractionAddEffectTitle": "Create Effect",
+    "DS4.UserInteractionEditEffectTitle": "Edit Effect",
+    "DS4.UserInteractionDeleteEffectTitle": "Delete Effect",
     "DS4.DocumentImageAltText": "Image of {name}",
     "DS4.RollableImageRollableTitle": "Roll for {name}",
     "DS4.DiceOverlayImageAltText": "Image of a d20",
@@ -121,6 +122,10 @@
     "DS4.SpellMinimumLevelsSorcerer": "Minimum level for Sorcerers",
     "DS4.SpellMinimumLevelsSorcererAbbr": "Min lvl SRC",
     "DS4.SpellPrice": "Price (Gold)",
+    "DS4.EffectEnabled": "Enabled",
+    "DS4.EffectEnabledAbbr": "E",
+    "DS4.EffectLabel": "Label",
+    "DS4.EffectSource": "Source",
     "DS4.ActorName": "Name",
     "DS4.ActorImageAltText": "Image of the Actor",
     "DS4.ActorTypeCharacter": "Character",

src/module/actor/sheets/actor-sheet.ts

@@ -11,6 +11,7 @@ import { getCanvas, getGame } from "../../helpers";
 import { DS4Item } from "../../item/item";
 import { DS4Settings, getDS4Settings } from "../../settings";
 import notifications from "../../ui/notifications";
+import { DS4Actor } from "../actor";
 import { isCheck } from "../actor-data-properties";
 
 /**
@@ -30,6 +31,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Options, DS4ActorSheetD
                 ".profile",
                 ".biography",
                 ".special-creature-abilities",
+                ".effects",
             ],
             tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "values" }],
             dragDrop: [
@@ -58,12 +60,26 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Options, DS4ActorSheetD
                 return [itemType, items.map((item) => item.data).sort((a, b) => (a.sort || 0) - (b.sort || 0))];
             }),
         );
+
+        const enrichedEffectPromises = this.actor.effects.toObject().map(async (effect) => {
+            const originatingDocument = effect.origin !== undefined ? await fromUuid(effect.origin) : undefined;
+            const source =
+                (originatingDocument instanceof DS4Actor || originatingDocument instanceof DS4Item
+                    ? originatingDocument.name
+                    : null) ?? undefined;
+
+            return {
+                ...effect,
+                source,
+            };
+        });
+        const enrichedEffects = await Promise.all(enrichedEffectPromises);
+
         const data = {
             ...this.addTooltipsToData(await super.getData()),
-            // Add the localization config to the data:
             config: DS4,
-            // Add the items explicitly sorted by type to the data:
             itemsByType,
+            enrichedEffects,
             settings: getDS4Settings(),
         };
         return data;
@@ -121,6 +137,8 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Options, DS4ActorSheetD
 
         html.find(".item-change").on("change", this.onItemChange.bind(this));
 
+        html.find(".effect-create").on("click", this.onEffectCreate.bind(this));
+
         html.find(".rollable-item").on("click", this.onRollItem.bind(this));
 
         html.find(".rollable-check").on("click", this.onRollCheck.bind(this));
@@ -233,6 +251,17 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Options, DS4ActorSheetD
         }
     }
 
+    protected onEffectCreate(event: JQuery.ClickEvent): void {
+        event.preventDefault();
+        const createData = {
+            label: "New Effect",
+            icon: "icons/svg/aura.svg",
+            origin: this.actor.uuid,
+        };
+
+        ActiveEffect.create(createData, { parent: this.actor });
+    }
+
     /**
      * Handle clickable item rolls.
      * @param event - The originating click event
@@ -299,5 +328,12 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Options, DS4ActorSheetD
 interface DS4ActorSheetData extends ActorSheet.Data<ActorSheet.Options> {
     config: typeof DS4;
     itemsByType: Record<string, foundry.data.ItemData[]>;
+    enrichedEffects: EnrichedActiveEffectDataSource[];
     settings: DS4Settings;
 }
+
+type ActiveEffectDataSource = foundry.data.ActiveEffectData["_source"];
+
+interface EnrichedActiveEffectDataSource extends ActiveEffectDataSource {
+    source?: string;
+}

src/module/handlebars/handlebars-partials.ts

@@ -8,6 +8,7 @@ export default async function registerHandlebarsPartials(): Promise<void> {
     const templatePaths = [
         "systems/ds4/templates/sheets/actor/components/actor-header.hbs",
         "systems/ds4/templates/sheets/actor/components/actor-progression.hbs",
+        "systems/ds4/templates/sheets/actor/components/add-button.hbs",
         "systems/ds4/templates/sheets/actor/components/biography.hbs",
         "systems/ds4/templates/sheets/actor/components/character-properties.hbs",
         "systems/ds4/templates/sheets/actor/components/check.hbs",
@@ -18,10 +19,11 @@ export default async function registerHandlebarsPartials(): Promise<void> {
         "systems/ds4/templates/sheets/actor/components/core-values.hbs",
         "systems/ds4/templates/sheets/actor/components/creature-properties.hbs",
         "systems/ds4/templates/sheets/actor/components/currency.hbs",
+        "systems/ds4/templates/sheets/actor/components/effect-list-entry.hbs",
+        "systems/ds4/templates/sheets/actor/components/effect-list-header.hbs",
         "systems/ds4/templates/sheets/actor/components/item-list-entry.hbs",
         "systems/ds4/templates/sheets/actor/components/item-list-header.hbs",
         "systems/ds4/templates/sheets/actor/components/items-overview.hbs",
-        "systems/ds4/templates/sheets/actor/components/overview-add-button.hbs",
         "systems/ds4/templates/sheets/actor/components/overview-control-buttons.hbs",
         "systems/ds4/templates/sheets/actor/components/profile.hbs",
         "systems/ds4/templates/sheets/actor/components/rollable-image.hbs",
@@ -31,6 +33,7 @@ export default async function registerHandlebarsPartials(): Promise<void> {
         "systems/ds4/templates/sheets/actor/tabs/character-inventory.hbs",
         "systems/ds4/templates/sheets/actor/tabs/creature-inventory.hbs",
         "systems/ds4/templates/sheets/actor/tabs/description.hbs",
+        "systems/ds4/templates/sheets/actor/tabs/effects.hbs",
         "systems/ds4/templates/sheets/actor/tabs/special-creature-abilities.hbs",
         "systems/ds4/templates/sheets/actor/tabs/spells.hbs",
         "systems/ds4/templates/sheets/actor/tabs/values.hbs",

src/module/item/item-sheet.ts

@@ -101,6 +101,7 @@ export class DS4ItemSheet extends ItemSheet<ItemSheet.Options, DS4ItemSheetData>
         const createData = {
             label: "New Effect",
             icon: "icons/svg/aura.svg",
+            origin: this.item.uuid,
         };
 
         return ActiveEffect.create(createData, { parent: this.item });

src/scss/components/_effect_list.scss

@@ -0,0 +1,68 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../utils/mixins";
+@use "../utils/variables";
+
+.ds4-effect-list {
+    @include mixins.mark-invalid-or-disabled-input;
+
+    $row-height: 1.75em;
+
+    align-items: center;
+    display: grid;
+    grid-column-gap: 0.5em;
+    grid-row-gap: 0.2em;
+    grid-template-columns: $row-height $row-height 3fr 2fr 5ch;
+    margin: 0.5em 0;
+    overflow-y: auto;
+    padding: 0;
+
+    :nth-child(5n + 1) {
+        justify-self: center;
+    }
+
+    &__row {
+        display: contents; // TODO: Once chromium supports `grid-template-columns: subgrid` (https://bugs.chromium.org/p/chromium/issues/detail?id=618969), switch to `display: grid; grid: 1/-1; grid-template-columns: subgrid`
+
+        &--header {
+            font-weight: bold;
+        }
+
+        > * {
+            height: $row-height;
+            line-height: $row-height;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    &__image {
+        border: none;
+    }
+
+    &__editable {
+        background-color: transparent;
+        border: 0;
+        padding: 0;
+
+        &--checkbox {
+            width: 100%;
+            height: 100%;
+            margin: 0px;
+        }
+    }
+
+    &__control-buttons {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        text-align: center;
+        width: 100%;
+        padding: 0 calc(1em / 3);
+    }
+}

src/scss/ds4.scss

@@ -33,6 +33,7 @@
     @include meta.load-css("components/core_values");
     @include meta.load-css("components/currency");
     @include meta.load-css("components/description");
+    @include meta.load-css("components/effect_list");
     @include meta.load-css("components/forms");
     @include meta.load-css("components/item_list");
     @include meta.load-css("components/profile");

src/templates/sheets/actor/character-sheet.hbs

@@ -18,6 +18,7 @@ SPDX-License-Identifier: MIT
         <a class="ds4-sheet-tab-nav__item item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
         <a class="ds4-sheet-tab-nav__item item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
         <a class="ds4-sheet-tab-nav__item item" data-tab="abilities">{{localize 'DS4.HeadingAbilities'}}</a>
+        <a class="ds4-sheet-tab-nav__item item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
         <a class="ds4-sheet-tab-nav__item item" data-tab="biography">{{localize 'DS4.HeadingBiography'}}</a>
     </nav>
 
@@ -37,6 +38,9 @@ SPDX-License-Identifier: MIT
 {{!-- Abilities Tab --}}
 {{> systems/ds4/templates/sheets/actor/tabs/abilities.hbs}}
 
+{{!-- Effects Tab --}}
+{{> systems/ds4/templates/sheets/actor/tabs/effects.hbs}}
+
 {{!-- Biography Tab --}}
 {{> systems/ds4/templates/sheets/actor/tabs/biography.hbs}}
 

src/templates/sheets/actor/components/add-button.hbs

@@ -0,0 +1,19 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+{{!
+!-- Render an "add" button.
+!-- @param class: The css class to use for the link element
+!-- @param title: The title to use for the link element (will be localized)
+!-- @param type: An optional property to use as data-type attribute
+}}
+<div>
+    <a class="{{class}}" title="{{localize title}}" {{#if type}}data-type="{{type}}" {{/if}}>
+        <i class="fas fa-plus"></i>
+        {{localize "DS4.UserInteractionAdd"}}
+    </a>
+</div>

src/templates/sheets/actor/components/effect-list-entry.hbs

@@ -0,0 +1,31 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+{{!--
+!-- Render an effect list entry row.
+!-- @param effectData: The data of the item.
+--}}
+<li class="ds4-effect-list__row item" data-item-id="{{itemData._id}}">
+    {{!-- enabled --}}
+    <input class="ds4-effect-list__editable ds4-effect-list__editable--checkbox effect-change" type="checkbox" {{checked
+        (ne effectData.disabled)}} data-dtype="Boolean" data-property="disabled"
+        title="{{localize 'DS4.EffectEnabled'}}">
+
+    {{!-- icon --}}
+    {{> systems/ds4/templates/sheets/actor/components/rollable-image.hbs rollable=false src=effectData.icon
+    alt=(localize "DS4.EffectIconAltText" label=effectData.label) title=effectData.label}}
+
+    {{!-- label --}}
+    <div title="{{effectData.label}}">{{effectData.label}}</div>
+
+    {{!-- source --}}
+    <div>{{effectData.source}}</div>
+
+    {{!-- control buttons --}}
+    {{> systems/ds4/templates/sheets/actor/components/overview-control-buttons.hbs
+    class="ds4-effect-list__control-buttons" }}
+</li>

src/templates/sheets/actor/components/effect-list-header.hbs

@@ -0,0 +1,26 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+{{!--
+!-- Render an effect list header row.
+--}}
+<li class="ds4-effect-list__row ds4-effect-list__row--header" data-effect-id="{{effectData._id}}">
+    {{!-- enabled --}}
+    <div title="{{localize 'DS4.EffectEnabled'}}">{{localize 'DS4.EffectEnabledAbbr'}}</div>
+
+    {{!-- icon --}}
+    <div></div>
+
+    {{!-- label --}}
+    <div>{{localize 'DS4.EffectLabel'}}</div>
+
+    {{!-- origin --}}
+    <div>{{localize 'DS4.EffectSource'}}</div>
+
+    {{!-- control buttons placeholder --}}
+    <div></div>
+</li>

src/templates/sheets/actor/components/items-overview.hbs

@@ -41,7 +41,8 @@ SPDX-License-Identifier: MIT
     {{/each}}
 </ol>
 {{/unless}}
-{{> systems/ds4/templates/sheets/actor/components/overview-add-button.hbs dataType='weapon'}}
+{{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+class='item-create' type='weapon'}}
 
 {{!-- ARMOR --}}
 <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeArmorPlural'}}</h4>
@@ -79,7 +80,8 @@ SPDX-License-Identifier: MIT
     {{/each}}
 </ol>
 {{/unless}}
-{{> systems/ds4/templates/sheets/actor/components/overview-add-button.hbs dataType='armor'}}
+{{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+class='item-create' type='armor'}}
 
 {{!-- SHIELD --}}
 <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeShieldPlural'}}</h4>
@@ -100,7 +102,8 @@ SPDX-License-Identifier: MIT
     {{/each}}
 </ol>
 {{/unless}}
-{{> systems/ds4/templates/sheets/actor/components/overview-add-button.hbs dataType='shield'}}
+{{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+class='item-create' type='shield'}}
 
 {{!-- EQUIPMENT --}}
 <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeEquipmentPlural'}}</h4>
@@ -120,7 +123,8 @@ SPDX-License-Identifier: MIT
     {{/each}}
 </ol>
 {{/unless}}
-{{> systems/ds4/templates/sheets/actor/components/overview-add-button.hbs dataType='equipment'}}
+{{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+class='item-create' type='equipment'}}
 
 {{!-- LOOT --}}
 <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeLootPlural'}}</h4>
@@ -139,4 +143,5 @@ SPDX-License-Identifier: MIT
     {{/each}}
 </ol>
 {{/unless}}
-{{> systems/ds4/templates/sheets/actor/components/overview-add-button.hbs dataType='loot'}}
+{{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+class='item-create' type='loot'}}

src/templates/sheets/actor/components/overview-add-button.hbs

@@ -1,17 +0,0 @@
-{{!--
-SPDX-FileCopyrightText: 2021 Johannes Loher
-SPDX-FileCopyrightText: 2021 Gesina Schwalbe
-
-SPDX-License-Identifier: MIT
---}}
-
-{{!
-!-- Render an "add" button for adding an item of given data type.
-!-- @param dataType: hand over the dataType to the partial as hash parameter
-}}
-<div class="item-controls">
-    <a class="item-control item-create" title="Create item" data-type="{{dataType}}">
-        <i class="fas fa-plus"></i>
-        {{localize "DS4.UserInteractionAddItem"}}
-    </a>
-</div>

src/templates/sheets/actor/components/overview-control-buttons.hbs

@@ -11,7 +11,8 @@ SPDX-License-Identifier: MIT
 !-- @param class: Additional CSS class(es) for the controls
 --}}
 <div class="item-controls {{class}}">
-    <a class="item-control item-edit" title="{{localize 'DS4.UserInteractionEditItem'}}"><i class="fas fa-edit"></i></a>
-    <a class="item-control item-delete" title="{{localize 'DS4.UserInteractionDeleteItem'}}"><i
+    <a class="item-control item-edit" title="{{localize 'DS4.UserInteractionEditItemTitle'}}"><i
+            class="fas fa-edit"></i></a>
+    <a class="item-control item-delete" title="{{localize 'DS4.UserInteractionDeleteItemTitle'}}"><i
             class="fas fa-trash"></i></a>
 </div>

src/templates/sheets/actor/creature-sheet.hbs

@@ -20,6 +20,7 @@ SPDX-License-Identifier: MIT
         <a class="ds4-sheet-tab-nav__item item" data-tab="special-creature-abilities">{{localize
             'DS4.HeadingSpecialCreatureAbilities'}}</a>
         <a class="ds4-sheet-tab-nav__item item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
+        <a class="ds4-sheet-tab-nav__item item" data-tab="effects">{{localize 'DS4.HeadingEffects'}}</a>
         <a class="ds4-sheet-tab-nav__item item" data-tab="description">{{localize 'DS4.HeadingDescription'}}</a>
     </nav>
 
@@ -37,6 +38,9 @@ SPDX-License-Identifier: MIT
         {{!-- Spells Tab --}}
         {{> systems/ds4/templates/sheets/actor/tabs/spells.hbs}}
 
+        {{!-- Effects Tab --}}
+        {{> systems/ds4/templates/sheets/actor/tabs/effects.hbs}}
+
         {{!-- Description Tab --}}
         {{> systems/ds4/templates/sheets/actor/tabs/description.hbs}}
     </section>

src/templates/sheets/actor/tabs/abilities.hbs

@@ -22,7 +22,8 @@ SPDX-License-Identifier: MIT
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/overview-add-button.hbs dataType='talent'}}
+    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    class='item-create' type='talent'}}
 
     {{!-- RACIAL ABILITY --}}
     <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeRacialAbilityPlural'}}</h4>
@@ -34,7 +35,8 @@ SPDX-License-Identifier: MIT
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/overview-add-button.hbs dataType='racialAbility'}}
+    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    class='item-create' type='racialAbility'}}
 
     {{!-- LANGUAGE --}}
     <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeLanguagePlural'}}</h4>
@@ -46,7 +48,8 @@ SPDX-License-Identifier: MIT
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/overview-add-button.hbs dataType='language'}}
+    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    class='item-create' type='language'}}
 
     {{!-- ALPHABET --}}
     <h4 class="ds4-item-list-title">{{localize 'DS4.ItemTypeAlphabetPlural'}}</h4>
@@ -58,5 +61,6 @@ SPDX-License-Identifier: MIT
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/overview-add-button.hbs dataType='alphabet'}}
+    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    class='item-create' type='alphabet'}}
 </div>

src/templates/sheets/actor/tabs/effects.hbs

@@ -0,0 +1,19 @@
+{{!--
+SPDX-FileCopyrightText: 2021 Johannes Loher
+SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+
+SPDX-License-Identifier: MIT
+--}}
+
+<div class="tab effects" data-group="primary" data-tab="effects">
+    {{#unless (isEmpty data.effects)}}
+    <ol class="ds4-effect-list">
+        {{> systems/ds4/templates/sheets/actor/components/effect-list-header.hbs}}
+        {{#each enrichedEffects as |effectData id| }}
+        {{> systems/ds4/templates/sheets/actor/components/effect-list-entry.hbs effectData=effectData}}
+        {{/each}}
+    </ol>
+    {{/unless}}
+    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddEffectTitle'
+    class='effect-create'}}
+</div>

src/templates/sheets/actor/tabs/special-creature-abilities.hbs

@@ -14,5 +14,6 @@ SPDX-License-Identifier: MIT
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/overview-add-button.hbs dataType='specialCreatureAbility'}}
+    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    class='item-create' type='specialCreatureAbility'}}
 </div>

src/templates/sheets/actor/tabs/spells.hbs

@@ -93,5 +93,6 @@ titleKey=titleKey}}
         {{/each}}
     </ol>
     {{/unless}}
-    {{> systems/ds4/templates/sheets/actor/components/overview-add-button.hbs dataType='spell' }}
+    {{> systems/ds4/templates/sheets/actor/components/add-button.hbs title='DS4.UserInteractionAddItemTitle'
+    class='item-create' type='spell'}}
 </div>

src/templates/sheets/item/tabs/effects.hbs

@@ -12,17 +12,18 @@ SPDX-License-Identifier: MIT
             <div class="effect-image"></div>
             <div class="effect-name">Name</div>
             <div class="effect-controls">
-                <a class="effect-control" data-action="create" title="{{localize 'DS4.UserInteractionAddEffect'}}">
-                    <i class="fas fa-plus"></i> {{localize 'DS4.UserInteractionAddEffect'}}</a>
+                <a class="effect-control" data-action="create" title="{{localize 'DS4.UserInteractionAddEffectTitle'}}">
+                    <i class="fas fa-plus"></i> {{localize 'DS4.UserInteractionAdd'}}</a>
             </div>
         </li>
         {{#each item.effects as |effect id|}}
         <li class="effect flexrow" data-effect-id="{{effect.id}}">
             <h4 class="effect-name">{{effect.data.label}}</h4>
             <div class="effect-controls">
-                <a class="effect-control" data-action="edit" title="{{localize 'DS4.UserInteractionEditEffect'}}">
+                <a class="effect-control" data-action="edit" title="{{localize 'DS4.UserInteractionEditEffectTitle'}}">
                     <i class="fas fa-edit"></i></a>
-                <a class="effect-control" data-action="delete" title="{{localize 'DS4.UserInteractionDeleteEffect'}}">
+                <a class="effect-control" data-action="delete"
+                    title="{{localize 'DS4.UserInteractionDeleteEffectTitle'}}">
                     <i class="fas fa-trash"></i></a>
             </div>
         </li>