Add effects and tabs

module/applications/sheets/armor-sheet.mjs

@@ -19,10 +19,32 @@ export default class PrismRPGArmorSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
 
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
     context.enrichedPassiveDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.passiveDescription, { async: true })
     context.enrichedAugmentDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.augmentDescription, { async: true })

module/applications/sheets/base-item-sheet.mjs

@@ -75,6 +75,20 @@ export default class PrismRPGItemSheet extends HandlebarsApplicationMixin(foundr
   _onRender(context, options) {
     super._onRender(context, options)
     this.#dragDrop.forEach((d) => d.bind(this.element))
+
+    // Activate tab navigation
+    const nav = this.element.querySelector('nav.tabs[data-group]')
+    if (nav) {
+      const group = nav.dataset.group
+      nav.querySelectorAll('[data-tab]').forEach(link => {
+        link.addEventListener('click', (event) => {
+          event.preventDefault()
+          const tab = event.currentTarget.dataset.tab
+          this.tabGroups[group] = tab
+          this.render()
+        })
+      })
+    }
   }
 
   // #region Drag-and-Drop Workflow

module/applications/sheets/equipment-sheet.mjs

@@ -19,9 +19,32 @@ export default class PrismRPGEquipmentSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
+
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
 
     // Enrich passive description if equipment is a kit

module/applications/sheets/miracle-sheet.mjs

@@ -19,9 +19,32 @@ export default class PrismRPGMiracleSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
+
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
     return context
   }

module/applications/sheets/shield-sheet.mjs

@@ -19,9 +19,32 @@ export default class PrismRPGShieldSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
+
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
     context.enrichedBlockAugmentDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.blockAugmentDescription, { async: true })
     return context

module/applications/sheets/spell-sheet.mjs

@@ -19,9 +19,32 @@ export default class PrismRPGSpellSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
+
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
     context.enrichedColorEffect = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.colorEffect, { async: true })
     context.enrichedAscensionEffect = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.ascensionEffect, { async: true })

module/applications/sheets/weapon-sheet.mjs

@@ -19,9 +19,32 @@ export default class PrismRPGWeaponSheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "details",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      details: { id: "details", group: "primary", label: "PRISMRPG.Label.details" },
+      description: { id: "description", group: "primary", label: "PRISMRPG.Label.description" },
+      effects: { id: "effects", group: "primary", label: "PRISMRPG.Label.effects" },
+    }
+    for (const v of Object.values(tabs)) {
+      v.active = this.tabGroups[v.group] === v.id
+      v.cssClass = v.active ? "active" : ""
+    }
+    return tabs
+  }
+
   /** @override */
   async _prepareContext() {
     const context = await super._prepareContext()
+    context.tabs = this.#getTabs()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
 
     // Enrich descriptions for all passives