Add effects and tabs

css/fvtt-prism-rpg.css

@@ -13,6 +13,9 @@
   --font-secondary: "BaskervilleBold", serif;
   --logo-standard: url("../assets/ui/prism-rpg-logo-01.webp");
 }
+.tab[data-group]:not(.active) {
+  display: none;
+}
 .initiative-area {
   min-width: 8rem;
   max-width: 8rem;
@@ -2550,6 +2553,312 @@ i.prismrpg {
 .prismrpg .class-content label {
   flex: 10%;
 }
+.prismrpg .character-path-content {
+  font-family: var(--font-primary);
+  font-size: calc(var(--font-size-standard) * 1);
+  color: var(--color-dark-1);
+  background-image: var(--background-image-base);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  overflow: auto;
+}
+.prismrpg .character-path-content nav.tabs [data-tab] {
+  color: #636060;
+}
+.prismrpg .character-path-content nav.tabs [data-tab].active {
+  color: #252424;
+}
+.prismrpg .character-path-content input:disabled,
+.prismrpg .character-path-content select:disabled {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-color: transparent;
+  color: var(--color-dark-3);
+}
+.prismrpg .character-path-content input,
+.prismrpg .character-path-content select {
+  height: 1.5rem;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-color: var(--color-dark-6);
+  color: var(--color-dark-2);
+}
+.prismrpg .character-path-content input[name="name"] {
+  height: 2.5rem;
+  margin-right: 4px;
+  font-family: var(--font-secondary);
+  font-size: calc(var(--font-size-standard) * 1.2);
+  font-weight: bold;
+  border: none;
+}
+.prismrpg .character-path-content fieldset {
+  margin-bottom: 4px;
+  border-radius: 4px;
+}
+.prismrpg .character-path-content .form-fields input,
+.prismrpg .character-path-content .form-fields select {
+  text-align: center;
+  font-size: calc(var(--font-size-standard) * 1);
+}
+.prismrpg .character-path-content .form-fields select {
+  font-family: var(--font-secondary);
+  font-size: calc(var(--font-size-standard) * 1);
+}
+.prismrpg .character-path-content legend {
+  font-family: var(--font-secondary);
+  font-size: calc(var(--font-size-standard) * 1.2);
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+.prismrpg .character-path-content .form-fields {
+  padding-top: 4px;
+}
+.prismrpg .character-path-content .form-group {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+}
+.prismrpg .character-path-content .form-group label {
+  align-content: center;
+  min-width: 10rem;
+  max-width: 10rem;
+}
+.prismrpg .character-path-content .form-group select,
+.prismrpg .character-path-content .form-group input {
+  text-align: left;
+  min-width: 12rem;
+  max-width: 12rem;
+}
+.prismrpg .character-path-content .form-group input[type="checkbox"] {
+  min-width: 1.2rem;
+  max-width: 1.2rem;
+  margin-right: 0.5rem;
+}
+.prismrpg .character-path-content label {
+  font-family: var(--font-secondary);
+  font-size: calc(var(--font-size-standard) * 1);
+  flex: 50%;
+}
+.prismrpg .character-path-content .align-top {
+  align-self: flex-start;
+  padding: 0.1rem;
+  margin-right: 0.2rem;
+}
+.prismrpg .character-path-content .shift-right {
+  margin-left: 2rem;
+}
+.prismrpg .character-path-content .header {
+  display: flex;
+}
+.prismrpg .character-path-content .header img {
+  width: 50px;
+  height: 50px;
+}
+.prismrpg .character-path-content input[type="checkbox"] {
+  font-size: var(--font-size-14);
+  width: 20px;
+  padding-top: 0;
+}
+.prismrpg .character-path-content input[type="checkbox"]:checked {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.prismrpg .character-path-content input[type="checkbox"]:checked::after {
+  color: rgba(0, 0, 0, 0.1);
+}
+.prismrpg .effects-container {
+  padding: 0.5rem;
+}
+.prismrpg .effect-category {
+  margin-bottom: 1rem;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.02);
+}
+.prismrpg .effect-category:last-child {
+  margin-bottom: 0;
+}
+.prismrpg .stat-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.prismrpg .stat-list.alternate-list .list-item {
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 32px;
+}
+.prismrpg .stat-list.alternate-list .list-item.items-title-bg {
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.15));
+  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+  padding: 0.5rem 0.6rem;
+  font-weight: bold;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+.prismrpg .stat-list.alternate-list .list-item.items-title-bg h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-family: var(--font-secondary);
+  color: rgba(0, 0, 0, 0.9);
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
+  font-weight: bold;
+}
+.prismrpg .stat-list.alternate-list .list-item.items-title-bg .short-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.7);
+  letter-spacing: 0.5px;
+}
+.prismrpg .stat-list.alternate-list .list-item.list-item-shadow {
+  transition: all 0.2s ease;
+  background: rgba(255, 255, 255, 0.05);
+}
+.prismrpg .stat-list.alternate-list .list-item.list-item-shadow:hover {
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.prismrpg .stat-list.alternate-list .list-item:last-child {
+  border-bottom: none;
+}
+.prismrpg .sheet-competence-img {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  object-fit: cover;
+  flex-shrink: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+.prismrpg .item-name-img {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  text-decoration: none;
+}
+.prismrpg .item-name-img:hover .sheet-competence-img {
+  border-color: rgba(13, 110, 253, 0.6);
+  box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
+}
+.prismrpg .item-name-label-header-long {
+  flex: 2;
+  display: flex;
+  align-items: center;
+}
+.prismrpg .item-name-label-header-long .items-title-text {
+  font-weight: bold;
+}
+.prismrpg .item-name-label-long {
+  flex: 2;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 0.9rem;
+}
+.prismrpg .item-field-label-short {
+  flex: 0 0 90px;
+  font-size: 0.8rem;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.7);
+  font-style: italic;
+}
+.prismrpg .item-field-label-medium {
+  flex: 0 0 100px;
+  font-size: 0.8rem;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.7);
+  font-style: italic;
+}
+.prismrpg .item-filler {
+  flex: 1;
+  min-width: 10px;
+}
+.prismrpg .item-controls {
+  display: flex;
+  gap: 0.3rem;
+  align-items: center;
+  flex-shrink: 0;
+}
+.prismrpg .item-controls.item-controls-fixed {
+  flex: 0 0 auto;
+}
+.prismrpg .item-controls.effect-controls {
+  gap: 0.25rem;
+}
+.prismrpg .effect-control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(240, 240, 240, 0.8));
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  color: rgba(0, 0, 0, 0.7);
+  text-decoration: none;
+  padding: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.prismrpg .effect-control i {
+  font-size: 0.85rem;
+  margin: 0;
+}
+.prismrpg .effect-control:hover {
+  background: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  border-color: rgba(0, 0, 0, 0.4);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transform: translateY(-1px);
+}
+.prismrpg .effect-control:active {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+.prismrpg .effect-control.item-edit:hover {
+  background: linear-gradient(to bottom, rgba(13, 110, 253, 0.2), rgba(13, 110, 253, 0.3));
+  color: #0d6efd;
+  border-color: rgba(13, 110, 253, 0.5);
+}
+.prismrpg .effect-control[data-action="create-effect"] {
+  width: auto;
+  padding: 0.3rem 0.5rem;
+  gap: 0.3rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  background: linear-gradient(to bottom, rgba(40, 167, 69, 0.25), rgba(40, 167, 69, 0.35));
+  border-color: rgba(40, 167, 69, 0.4);
+  color: #19642a;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+.prismrpg .effect-control[data-action="create-effect"]:hover {
+  background: linear-gradient(to bottom, rgba(40, 167, 69, 0.35), rgba(40, 167, 69, 0.45));
+  border-color: rgba(40, 167, 69, 0.6);
+  color: #19642a;
+}
+.prismrpg .effect-control[data-action="create-effect"] i {
+  font-size: 0.75rem;
+}
+.prismrpg .effect-control[data-action="effect-delete"]:hover {
+  background: linear-gradient(to bottom, rgba(220, 53, 69, 0.2), rgba(220, 53, 69, 0.3));
+  color: #dc3545;
+  border-color: rgba(220, 53, 69, 0.5);
+}
+.prismrpg .flexrow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
 .application.dialog.prismrpg {
   color: var(--color-dark-1);
 }

lang/en.json

@@ -402,6 +402,11 @@
       "damage": "Damage",
       "description": "Description",
       "details": "Details",
+      "effects": "Effects",
+      "source": "Source",
+      "temporary": "Temporary",
+      "passive": "Passive",
+      "inactive": "Inactive",
       "dex": "DEX",
       "equipment": "Equipment",
       "experience": "Experience",
@@ -1243,7 +1248,8 @@
       "vulnerability": "Vulnerability",
       "weapon": "Weapon",
       "race": "Race",
-      "class": "Class"
+      "class": "Class",
+      "character-path": "Character Path"
     }
   }
 }

module/applications/_module.mjs

@@ -11,3 +11,4 @@ export { default as PrismRPGShieldSheet } from "./sheets/shield-sheet.mjs"
 export { default as PrismRPGMiracleSheet } from "./sheets/miracle-sheet.mjs"
 export { default as PrismRPGRaceSheet } from "./sheets/race-sheet.mjs"
 export { default as PrismRPGClassSheet } from "./sheets/class-sheet.mjs"
+export { default as PrismRPGCharacterPathSheet } from "./sheets/character-path-sheet.mjs"

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

@@ -31,6 +31,9 @@ export default class PrismRPGItemSheet extends HandlebarsApplicationMixin(foundr
     actions: {
       toggleSheet: PrismRPGItemSheet.#onToggleSheet,
       editImage: PrismRPGItemSheet.#onEditImage,
+      "create-effect": PrismRPGItemSheet.#onCreateActiveEffect,
+      "effect-edit": PrismRPGItemSheet.#onEffectEdit,
+      "effect-delete": PrismRPGItemSheet.#onEffectDelete,
     },
   }
 
@@ -65,6 +68,7 @@ export default class PrismRPGItemSheet extends HandlebarsApplicationMixin(foundr
     context.system = this.document.system
     context.source = this.document.toObject()
     context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.description, { async: true })
+    context.effectCategories = this.#prepareActiveEffectCategories(this.document.effects)
     context.isEditMode = this.isEditMode
     context.isPlayMode = this.isPlayMode
     context.isEditable = this.isEditable
@@ -75,6 +79,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
@@ -189,5 +207,99 @@ export default class PrismRPGItemSheet extends HandlebarsApplicationMixin(foundr
     })
     return fp.browse()
   }
+
+  /**
+   * Prepare Active Effects organized by category (temporary, passive, inactive).
+   * @param {ActiveEffect[]} effects    The raw Active Effects collection
+   * @returns {object}                  The categorized effects
+   * @private
+   */
+  #prepareActiveEffectCategories(effects) {
+    // Define effect header categories
+    const categories = {
+      temporary: {
+        type: "temporary",
+        label: game.i18n.localize("PRISMRPG.Label.temporary"),
+        effects: [],
+      },
+      passive: {
+        type: "passive",
+        label: game.i18n.localize("PRISMRPG.Label.passive"),
+        effects: [],
+      },
+      inactive: {
+        type: "inactive",
+        label: game.i18n.localize("PRISMRPG.Label.inactive"),
+        effects: [],
+      },
+    }
+
+    // Iterate over active effects, classifying them into categories
+    for (let e of effects) {
+      const effect = e.toObject()
+      if (e.disabled) categories.inactive.effects.push(effect)
+      else if (e.isTemporary) categories.temporary.effects.push(effect)
+      else categories.passive.effects.push(effect)
+    }
+    return categories
+  }
+
+  /**
+   * Handle creating a new Active Effect on the Item.
+   * @param {Event} event             The initiating click event.
+   * @param {HTMLElement} target      The current target of the event listener.
+   * @private
+   */
+  static async #onCreateActiveEffect(event, target) {
+    const effectType = target.dataset.effectType
+    let durationValue = undefined
+    let disabled = false
+
+    if (effectType === "temporary") {
+      durationValue = 10
+    }
+    if (effectType === "inactive") {
+      disabled = true
+    }
+
+    const effectData = {
+      name: game.i18n.format("DOCUMENT.New", { type: game.i18n.localize("DOCUMENT.ActiveEffect") }),
+      img: "icons/svg/aura.svg",
+      origin: this.document.uuid,
+      disabled: disabled,
+      changes: [],
+      duration: durationValue !== undefined ? { rounds: durationValue } : {},
+      flags: {}
+    }
+    await this.document.createEmbeddedDocuments("ActiveEffect", [effectData])
+  }
+
+  /**
+   * Handle editing an Active Effect on the Item.
+   * @param {Event} event             The initiating click event.
+   * @param {HTMLElement} target      The current target of the event listener.
+   * @private
+   */
+  static async #onEffectEdit(event, target) {
+    const li = target.closest(".item")
+    const effectId = li.dataset.itemId
+    const effect = this.document.effects.get(effectId)
+    if (!effect) return
+    effect.sheet.render(true)
+  }
+
+  /**
+   * Handle deleting an Active Effect from the Item.
+   * @param {Event} event             The initiating click event.
+   * @param {HTMLElement} target      The current target of the event listener.
+   * @private
+   */
+  static async #onEffectDelete(event, target) {
+    const li = target.closest(".item")
+    const effectId = li.dataset.itemId
+    const effect = this.document.effects.get(effectId)
+    if (!effect) return
+    await effect.delete()
+  }
   // #endregion
 }

module/applications/sheets/character-path-sheet.mjs

@@ -0,0 +1,50 @@
+import PrismRPGItemSheet from "./base-item-sheet.mjs"
+
+export default class PrismRPGCharacterPathSheet extends PrismRPGItemSheet {
+  /** @override */
+  static DEFAULT_OPTIONS = {
+    classes: ["character-path"],
+    position: {
+      width: 600,
+    },
+    window: {
+      contentClasses: ["character-path-content"],
+    },
+  }
+
+  /** @override */
+  static PARTS = {
+    main: {
+      template: "systems/fvtt-prism-rpg/templates/character-path.hbs",
+    },
+  }
+
+  /** @override */
+  tabGroups = {
+    primary: "description",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      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()
+    return context
+  }
+
+}

module/applications/sheets/class-sheet.mjs

@@ -20,9 +20,31 @@ export default class PrismRPGClassSheet 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" },
+    }
+    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.enrichedAttributeBonuses = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.attributeBonuses, { async: true })
     context.enrichedNotes = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.notes, { async: true })

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/race-sheet.mjs

@@ -19,9 +19,31 @@ export default class PrismRPGRaceSheet 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" },
+    }
+    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.enrichedRacialPassiveDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.racialPassiveDescription, { async: true })
     context.enrichedSubraceAbilityDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(this.document.system.subraceAbilityDescription, { async: true })

module/applications/sheets/racial-ability-sheet.mjs

@@ -19,4 +19,32 @@ export default class PrismRPGRacialAbilitySheet extends PrismRPGItemSheet {
     },
   }
 
+  /** @override */
+  tabGroups = {
+    primary: "description",
+  }
+
+  /**
+   * Prepare an array of form header tabs.
+   * @returns {Record<string, Partial<ApplicationTab>>}
+   */
+  #getTabs() {
+    const tabs = {
+      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()
+    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

module/documents/item.mjs

@@ -7,7 +7,8 @@ export const defaultItemImg = {
   shield: "systems/fvtt-prism-rpg/assets/icons/icon_shield.webp",
   spell: "systems/fvtt-prism-rpg/assets/icons/icon_spell.webp",
   race: "systems/fvtt-prism-rpg/assets/icons/icon_race.webp",
-  class: "systems/fvtt-prism-rpg/assets/icons/icon_class.webp"
+  class: "systems/fvtt-prism-rpg/assets/icons/icon_class.webp",
+  "character-path": "systems/fvtt-prism-rpg/assets/icons/icon_character_path.webp",
 }
 
 export default class PrismRPGItem extends Item {

module/models/_module.mjs

@@ -11,3 +11,4 @@ export { default as PrismRPGEquipment } from "./equipment.mjs"
 export { default as PrismRPGMiracle } from "./miracle.mjs"
 export { default as PrismRPGRace } from "./race.mjs"
 export { default as PrismRPGClass } from "./class.mjs"
+export { default as PrismRPGCharacterPath } from "./character-path.mjs"

module/models/character-path.mjs

@@ -0,0 +1,14 @@
+export default class PrismRPGCharacterPath extends foundry.abstract.TypeDataModel {
+  static defineSchema() {
+    const fields = foundry.data.fields
+    const schema = {}
+
+    schema.description = new fields.HTMLField({ required: true, textSearch: true })
+
+    return schema
+  }
+
+  /** @override */
+  static LOCALIZATION_PREFIXES = ["PRISMRPG.CharacterPath"]
+
+}

module/utils.mjs

@@ -251,4 +251,15 @@ export default class PrismRPGUtils {
     }
   }
 
+  /**
+   * Preload Handlebars templates for partials
+   * @returns {Promise}
+   */
+  static async preloadHandlebarsTemplates() {
+    const templatePaths = [
+      'systems/fvtt-prism-rpg/templates/partial-item-effects.hbs',
+    ]
+    return foundry.applications.handlebars.loadTemplates(templatePaths)
+  }
+
 }

prism-rpg.mjs

@@ -57,6 +57,7 @@ Hooks.once("init", function () {
     // Miracle: models.PrismRPGMiracle // Disabled - Legacy from Lethal Fantasy, PRISM uses Divine class features instead
     race: models.PrismRPGRace,
     class: models.PrismRPGClass,
+    "character-path": models.PrismRPGCharacterPath,
   }
 
   // Register sheet application classes
@@ -75,6 +76,7 @@ Hooks.once("init", function () {
   foundry.documents.collections.Items.registerSheet("prismRPG", applications.PrismRPGEquipmentSheet, { types: ["equipment"], makeDefault: true })
   foundry.documents.collections.Items.registerSheet("prismRPG", applications.PrismRPGRaceSheet, { types: ["race"], makeDefault: true })
   foundry.documents.collections.Items.registerSheet("prismRPG", applications.PrismRPGClassSheet, { types: ["class"], makeDefault: true })
+  foundry.documents.collections.Items.registerSheet("prismRPG", applications.PrismRPGCharacterPathSheet, { types: ["character-path"], makeDefault: true })
   // Foundry.documents.collections.Items.registerSheet("prismRPG", applications.PrismRPGMiracleSheet, { types: ["miracle"], makeDefault: true }) // Disabled - Legacy from Lethal Fantasy
 
   // Other Document Configuration
@@ -96,6 +98,7 @@ Hooks.once("init", function () {
 
   setupTextEnrichers()
   PrismRPGUtils.registerHandlebarsHelpers()
+  PrismRPGUtils.preloadHandlebarsTemplates()
   PrismRPGUtils.setHookListeners()
 
   console.info("PRISM RPG | System Initialized")

styles/character-path.less

@@ -0,0 +1,26 @@
+.character-path-content {
+  .sheet-common();
+  .item-sheet-common();
+
+  .header {
+    display: flex;
+    img {
+      width: 50px;
+      height: 50px;
+    }
+  }
+
+  input[type="checkbox"] {
+    font-size: var(--font-size-14);
+    width: 20px;
+    padding-top: 0;
+  }
+
+  input[type="checkbox"]:checked {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  input[type="checkbox"]:checked::after {
+    color: rgba(0, 0, 0, 0.1);
+  }
+}

styles/effects.less

@@ -0,0 +1,270 @@
+// Active Effects styling - compact and modern design
+
+// Effects container
+.effects-container {
+  padding: 0.5rem;
+}
+
+// Effect categories sections
+.effect-category {
+  margin-bottom: 1rem;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.02);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Effect list styling
+.stat-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  &.alternate-list {
+    .list-item {
+      padding: 0.4rem 0.6rem;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      align-items: center;
+      gap: 0.5rem;
+      min-height: 32px;
+
+      &.items-title-bg {
+        background: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0.25),
+          rgba(0, 0, 0, 0.15)
+        );
+        border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+        padding: 0.5rem 0.6rem;
+        font-weight: bold;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+
+        h3 {
+          margin: 0;
+          font-size: 1rem;
+          font-family: var(--font-secondary);
+          color: rgba(0, 0, 0, 0.9);
+          text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
+          font-weight: bold;
+        }
+
+        .short-label {
+          font-size: 0.7rem;
+          text-transform: uppercase;
+          font-weight: 600;
+          color: rgba(0, 0, 0, 0.7);
+          letter-spacing: 0.5px;
+        }
+      }
+
+      &.list-item-shadow {
+        transition: all 0.2s ease;
+        background: rgba(255, 255, 255, 0.05);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.15);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        }
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+// Effect image - compact size
+.sheet-competence-img {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  object-fit: cover;
+  flex-shrink: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.item-name-img {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  text-decoration: none;
+
+  &:hover .sheet-competence-img {
+    border-color: rgba(13, 110, 253, 0.6);
+    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
+  }
+}
+
+// Effect labels - compact spacing
+.item-name-label-header-long {
+  flex: 2;
+  display: flex;
+  align-items: center;
+
+  .items-title-text {
+    font-weight: bold;
+  }
+}
+
+.item-name-label-long {
+  flex: 2;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 0.9rem;
+}
+
+.item-field-label-short {
+  flex: 0 0 90px;
+  font-size: 0.8rem;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.7);
+  font-style: italic;
+}
+
+.item-field-label-medium {
+  flex: 0 0 100px;
+  font-size: 0.8rem;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.7);
+  font-style: italic;
+}
+
+// Filler for spacing
+.item-filler {
+  flex: 1;
+  min-width: 10px;
+}
+
+// Effect controls - compact and modern
+.item-controls {
+  display: flex;
+  gap: 0.3rem;
+  align-items: center;
+  flex-shrink: 0;
+
+  &.item-controls-fixed {
+    flex: 0 0 auto;
+  }
+
+  &.effect-controls {
+    gap: 0.25rem;
+  }
+}
+
+.effect-control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.8),
+    rgba(240, 240, 240, 0.8)
+  );
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  color: rgba(0, 0, 0, 0.7);
+  text-decoration: none;
+  padding: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+  i {
+    font-size: 0.85rem;
+    margin: 0;
+  }
+
+  &:hover {
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 1),
+      rgba(230, 230, 230, 1)
+    );
+    border-color: rgba(0, 0, 0, 0.4);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  &.item-edit:hover {
+    background: linear-gradient(
+      to bottom,
+      rgba(13, 110, 253, 0.2),
+      rgba(13, 110, 253, 0.3)
+    );
+    color: rgba(13, 110, 253, 1);
+    border-color: rgba(13, 110, 253, 0.5);
+  }
+
+  // New effect button styling
+  &[data-action="create-effect"] {
+    width: auto;
+    padding: 0.3rem 0.5rem;
+    gap: 0.3rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    background: linear-gradient(
+      to bottom,
+      rgba(40, 167, 69, 0.25),
+      rgba(40, 167, 69, 0.35)
+    );
+    border-color: rgba(40, 167, 69, 0.4);
+    color: rgba(25, 100, 42, 1);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+
+    &:hover {
+      background: linear-gradient(
+        to bottom,
+        rgba(40, 167, 69, 0.35),
+        rgba(40, 167, 69, 0.45)
+      );
+      border-color: rgba(40, 167, 69, 0.6);
+      color: rgba(25, 100, 42, 1);
+    }
+
+    i {
+      font-size: 0.75rem;
+    }
+  }
+
+  // Delete button specific styling
+  &[data-action="effect-delete"]:hover {
+    background: linear-gradient(
+      to bottom,
+      rgba(220, 53, 69, 0.2),
+      rgba(220, 53, 69, 0.3)
+    );
+    color: rgba(220, 53, 69, 1);
+    border-color: rgba(220, 53, 69, 0.5);
+  }
+}
+
+// Flexrow utility
+.flexrow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}

styles/fvtt-prism-rpg.less

@@ -17,6 +17,8 @@
   @import "miracle.less";
   @import "race.less";
   @import "class.less";
+  @import "character-path.less";
+  @import "effects.less";
 }
 
 @import "roll.less";

styles/global.less

@@ -6,6 +6,11 @@
   --logo-standard: url("../assets/ui/prism-rpg-logo-01.webp");
 }
 
+// Tab system - hide inactive tabs
+.tab[data-group]:not(.active) {
+  display: none;
+}
+
 .initiative-area {
   min-width: 8rem;
   max-width: 8rem;

system.json

@@ -40,7 +40,8 @@
       "spell": { "htmlFields": ["description"] },
       "equipment": { "htmlFields": ["description"] },
       "race": { "htmlFields": ["description", "racialPassiveDescription", "subraceAbilityDescription", "notes"] },
-      "class": { "htmlFields": ["description", "attributeBonuses", "notes", "features.level1", "features.level2", "features.level3", "features.level4", "features.level5", "features.level6", "features.level7", "features.level8", "features.level9", "features.level10"] }
+      "class": { "htmlFields": ["description", "attributeBonuses", "notes", "features.level1", "features.level2", "features.level3", "features.level4", "features.level5", "features.level6", "features.level7", "features.level8", "features.level9", "features.level10"] },
+      "character-path": { "htmlFields": ["description"] }
     }
   },
   "grid": {

templates/armor.hbs

@@ -10,6 +10,26 @@
     {{formInput fields.name value=source.name}}
   </div>
 
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize
+        "PRISMRPG.Label.details"
+      }}</a>
+    <a
+      class="item {{tabs.description.cssClass}}"
+      data-tab="description"
+    >{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize
+        "PRISMRPG.Label.effects"
+      }}</a>
+  </nav>
+
+  {{! Onglet Details }}
+  <div
+    class="tab {{tabs.details.cssClass}}"
+    data-group="primary"
+    data-tab="details"
+  >
     {{! Armor Type (Light/Medium/Heavy) }}
     {{formField
       systemFields.armorType
@@ -48,44 +68,6 @@
       label="PRISMRPG.Label.equipped"
     }}
 
-  {{! Prism RPG: Armor Passive }}
-  <fieldset class="armor-passive">
-    <legend>{{localize "PRISMRPG.Label.armorPassive"}}</legend>
-    {{formField
-      systemFields.passive
-      value=system.passive
-      localize=true
-      label="PRISMRPG.Label.passiveName"
-    }}
-    <label>{{localize "PRISMRPG.Label.passiveDescription"}}</label>
-    {{formInput
-      systemFields.passiveDescription
-      enriched=enrichedPassiveDescription
-      value=system.passiveDescription
-      name="system.passiveDescription"
-      toggled=true
-    }}
-  </fieldset>
-
-  {{! Prism RPG: Armor Augment }}
-  <fieldset class="armor-augment">
-    <legend>{{localize "PRISMRPG.Label.armorAugment"}}</legend>
-    {{formField
-      systemFields.augment
-      value=system.augment
-      localize=true
-      label="PRISMRPG.Label.augmentName"
-    }}
-    <label>{{localize "PRISMRPG.Label.augmentDescription"}}</label>
-    {{formInput
-      systemFields.augmentDescription
-      enriched=enrichedAugmentDescription
-      value=system.augmentDescription
-      name="system.augmentDescription"
-      toggled=true
-    }}
-  </fieldset>
-
     {{! Cost }}
     {{formField
       systemFields.cost
@@ -99,7 +81,14 @@
       localize=true
       label="PRISMRPG.Label.currency"
     }}
+  </div>
 
+  {{! Onglet Description }}
+  <div
+    class="tab {{tabs.description.cssClass}}"
+    data-group="primary"
+    data-tab="description"
+  >
     {{! Description }}
     <fieldset>
       <legend>{{localize "PRISMRPG.Label.description"}}</legend>
@@ -111,4 +100,15 @@
         toggled=true
       }}
     </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div
+    class="tab {{tabs.effects.cssClass}}"
+    data-group="primary"
+    data-tab="effects"
+  >
+    {{> systems/fvtt-prism-rpg/templates/partial-item-effects.hbs}}
+  </div>
+
 </section>

templates/character-path.hbs

@@ -0,0 +1,38 @@
+<section>
+  <div class="header">
+    <img
+      class="item-img"
+      src="{{item.img}}"
+      data-edit="img"
+      data-action="editImage"
+      data-tooltip="{{item.name}}"
+    />
+    {{formInput fields.name value=source.name}}
+  </div>
+
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.description.cssClass}}" data-tab="description">{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize "PRISMRPG.Label.effects"}}</a>
+  </nav>
+
+  {{! Onglet Description }}
+  <div class="tab {{tabs.description.cssClass}}" data-group="primary" data-tab="description">
+    <fieldset>
+      <legend>{{localize "PRISMRPG.Label.description"}}</legend>
+      {{formInput
+        systemFields.description
+        enriched=enrichedDescription
+        value=system.description
+        name="system.description"
+        toggled=true
+      }}
+    </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div class="tab {{tabs.effects.cssClass}}" data-group="primary" data-tab="effects">
+    {{> systems/fvtt-prism-rpg/templates/partial-item-effects.hbs}}
+  </div>
+
+</section>

templates/class.hbs

@@ -4,6 +4,14 @@
     {{formInput fields.name value=source.name}}
   </div>
 
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize "PRISMRPG.Label.details"}}</a>
+    <a class="item {{tabs.description.cssClass}}" data-tab="description">{{localize "PRISMRPG.Label.description"}}</a>
+  </nav>
+
+  {{! Onglet Details }}
+  <div class="tab {{tabs.details.cssClass}}" data-group="primary" data-tab="details">
   <div class="flexrow">
     <div class="align-top">
 
@@ -63,6 +71,20 @@
         }}
     {{/each}}
   </fieldset>
+  </div>
+
+  {{! Onglet Description }}
+  <div class="tab {{tabs.description.cssClass}}" data-group="primary" data-tab="description">
+    <fieldset>
+      <legend>{{localize "PRISMRPG.Label.description"}}</legend>
+      {{formInput
+        systemFields.description
+        enriched=enrichedDescription
+        value=system.description
+        name="system.description"
+        toggled=true
+      }}
+    </fieldset>
 
     {{! Notes }}
     <fieldset>
@@ -75,17 +97,6 @@
         toggled=true
       }}
     </fieldset>
-
+  </div>
-  {{! Description }}
-  <fieldset>
-    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
-    {{formInput
-      systemFields.description
-      enriched=enrichedDescription
-      value=system.description
-      name="system.description"
-      toggled=true
-    }}
-  </fieldset>
 
 </section>

templates/equipment.hbs

@@ -9,6 +9,16 @@
     />
     {{formInput fields.name value=source.name}}
   </div>
+
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize "PRISMRPG.Label.details"}}</a>
+    <a class="item {{tabs.description.cssClass}}" data-tab="description">{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize "PRISMRPG.Label.effects"}}</a>
+  </nav>
+
+  {{! Onglet Details }}
+  <div class="tab {{tabs.details.cssClass}}" data-group="primary" data-tab="details">
   {{formField systemFields.encLoad value=system.encLoad localize=true}}
   {{formField systemFields.cost value=system.cost localize=true}}
   {{formField systemFields.money value=system.money localize=true}}
@@ -73,7 +83,10 @@
       {{/unless}}
     </fieldset>
   {{/if}}
+  </div>
 
+  {{! Onglet Description }}
+  <div class="tab" data-group="primary" data-tab="description">
   <fieldset>
     <legend>{{localize "PRISMRPG.Label.description"}}</legend>
     {{formInput
@@ -84,5 +97,11 @@
       toggled=true
     }}
   </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div class="tab {{tabs.effects.cssClass}}" data-group="primary" data-tab="effects">
+    {{> systems/fvtt-prism-rpg/templates/partial-item-effects.hbs}}
+  </div>
 
 </section>

templates/miracle.hbs

@@ -10,6 +10,26 @@
     {{formInput fields.name value=source.name}}
   </div>
 
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize
+        "PRISMRPG.Label.details"
+      }}</a>
+    <a
+      class="item {{tabs.description.cssClass}}"
+      data-tab="description"
+    >{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize
+        "PRISMRPG.Label.effects"
+      }}</a>
+  </nav>
+
+  {{! Onglet Details }}
+  <div
+    class="tab {{tabs.details.cssClass}}"
+    data-group="primary"
+    data-tab="details"
+  >
     {{! Prism RPG: Miracle Type }}
     {{formField
       systemFields.miracleType
@@ -42,27 +62,6 @@
       label="PRISMRPG.Label.divineFavor"
     }}
 
-  {{! Prism RPG: Miracle Augment }}
-  <fieldset class="miracle-augment">
-    <legend>{{localize "PRISMRPG.Label.miracleAugment"}}</legend>
-    {{formField
-      systemFields.augment
-      value=system.augment
-      localize=true
-      label="PRISMRPG.Label.augmentName"
-    }}
-    <div class="form-group">
-      <label>{{localize "PRISMRPG.Label.augmentDescription"}}</label>
-      {{formInput
-        systemFields.augmentDescription
-        enriched=enrichedAugmentDescription
-        value=system.augmentDescription
-        name="system.augmentDescription"
-        toggled=true
-      }}
-    </div>
-  </fieldset>
-
     {{! Miracle Components (includes Religious) }}
     <fieldset class="miracle-components">
       <legend>{{localize "PRISMRPG.Label.components"}}</legend>
@@ -152,6 +151,34 @@
       label="PRISMRPG.Label.level"
     }}
 
+    {{! Prism RPG: Miracle Augment }}
+    <fieldset class="miracle-augment">
+      <legend>{{localize "PRISMRPG.Label.miracleAugment"}}</legend>
+      {{formField
+        systemFields.augment
+        value=system.augment
+        localize=true
+        label="PRISMRPG.Label.augmentName"
+      }}
+      <div class="form-group">
+        <label>{{localize "PRISMRPG.Label.augmentDescription"}}</label>
+        {{formInput
+          systemFields.augmentDescription
+          enriched=enrichedAugmentDescription
+          value=system.augmentDescription
+          name="system.augmentDescription"
+          toggled=true
+        }}
+      </div>
+    </fieldset>
+  </div>
+
+  {{! Onglet Description }}
+  <div
+    class="tab {{tabs.description.cssClass}}"
+    data-group="primary"
+    data-tab="description"
+  >
     <fieldset>
       <legend>{{localize "PRISMRPG.Label.description"}}</legend>
       {{formInput
@@ -162,5 +189,15 @@
         toggled=true
       }}
     </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div
+    class="tab {{tabs.effects.cssClass}}"
+    data-group="primary"
+    data-tab="effects"
+  >
+    {{> systems/fvtt-prism-rpg/templates/partial-item-effects.hbs}}
+  </div>
 
 </section>

templates/partial-item-effects.hbs

@@ -0,0 +1,80 @@
+{{! Template pour l'onglet Effects des items - organisé par catégories }}
+<div class="effects-container">
+
+  {{#each effectCategories as |section sid|}}
+    <div class="effect-category">
+      <ul class="stat-list alternate-list">
+        <li class="item flexrow list-item items-title-bg">
+          <span class="item-name-label-header-long">
+            <h3><label class="items-title-text">{{localize
+                  section.label
+                }}</label></h3>
+          </span>
+          <span class="item-field-label-short">
+            <label class="short-label">{{localize
+                "PRISMRPG.Label.source"
+              }}</label>
+          </span>
+          <span class="item-field-label-medium">
+            <label class="short-label">{{localize
+                "PRISMRPG.Label.duration"
+              }}</label>
+          </span>
+          <div class="item-filler">&nbsp;</div>
+          <div class="item-controls item-controls-fixed">
+            <a
+              class="effect-control"
+              data-action="create-effect"
+              data-effect-type="{{section.type}}"
+              title="{{localize 'DOCUMENT.Create' type="Effect"}}"
+            >
+              <i class="fas fa-plus"></i>
+              {{localize "DOCUMENT.New" type="Effect"}}
+            </a>
+          </div>
+        </li>
+
+        {{#each section.effects as |effect|}}
+          <li
+            class="item flexrow list-item list-item-shadow"
+            data-item-id="{{effect._id}}"
+            data-effect-id="{{effect._id}}"
+            data-parent-id="{{effect.parent.id}}"
+          >
+            <a
+              class="item-edit item-name-img"
+              data-action="effect-edit"
+              title="Edit Effect"
+            >
+              <img class="sheet-competence-img" src="{{effect.img}}" />
+            </a>
+            <span class="item-name-label-long">{{effect.name}}</span>
+            <span class="item-field-label-short">{{effect.sourceName}}</span>
+            <span
+              class="item-field-label-short"
+            >{{effect.duration.label}}</span>
+
+            <div class="item-filler">&nbsp;</div>
+            <div class="item-controls effect-controls flexrow">
+              <a
+                class="effect-control item-edit"
+                data-action="effect-edit"
+                title="{{localize 'DOCUMENT.Update' type="Effect"}}"
+              >
+                <i class="fas fa-edit"></i>
+              </a>
+              <a
+                class="effect-control"
+                data-action="effect-delete"
+                title="{{localize 'DOCUMENT.Delete' type="Effect"}}"
+              >
+                <i class="fas fa-trash"></i>
+              </a>
+            </div>
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+  {{/each}}
+
+</div>

templates/race.hbs

@@ -10,6 +10,23 @@
     {{formInput fields.name value=source.name}}
   </div>
 
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize
+        "PRISMRPG.Label.details"
+      }}</a>
+    <a
+      class="item {{tabs.description.cssClass}}"
+      data-tab="description"
+    >{{localize "PRISMRPG.Label.description"}}</a>
+  </nav>
+
+  {{! Onglet Details }}
+  <div
+    class="tab {{tabs.details.cssClass}}"
+    data-group="primary"
+    data-tab="details"
+  >
     <div class="flexrow">
       <div class="align-top">
 
@@ -63,6 +80,24 @@
         toggled=true
       }}
     </fieldset>
+  </div>
+
+  {{! Onglet Description }}
+  <div
+    class="tab {{tabs.description.cssClass}}"
+    data-group="primary"
+    data-tab="description"
+  >
+    <fieldset>
+      <legend>{{localize "PRISMRPG.Label.description"}}</legend>
+      {{formInput
+        systemFields.description
+        enriched=enrichedDescription
+        value=system.description
+        name="system.description"
+        toggled=true
+      }}
+    </fieldset>
 
     {{! Notes }}
     <fieldset>
@@ -75,17 +110,6 @@
         toggled=true
       }}
     </fieldset>
-
+  </div>
-  {{! Description }}
-  <fieldset>
-    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
-    {{formInput
-      systemFields.description
-      enriched=enrichedDescription
-      value=system.description
-      name="system.description"
-      toggled=true
-    }}
-  </fieldset>
 
 </section>

templates/racial-ability.hbs

@@ -10,6 +10,14 @@
     {{formInput fields.name value=source.name}}
   </div>
 
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.description.cssClass}}" data-tab="description">{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize "PRISMRPG.Label.effects"}}</a>
+  </nav>
+
+  {{! Onglet Description }}
+  <div class="tab {{tabs.description.cssClass}}" data-group="primary" data-tab="description">
     <fieldset>
       <legend>{{localize "PRISMRPG.Label.description"}}</legend>
       {{formInput
@@ -20,5 +28,11 @@
         toggled=true
       }}
     </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div class="tab {{tabs.effects.cssClass}}" data-group="primary" data-tab="effects">
+    {{> systems/fvtt-prism-rpg/templates/partial-item-effects.hbs}}
+  </div>
 
 </section>

templates/shield.hbs

@@ -10,6 +10,26 @@
     {{formInput fields.name value=source.name}}
   </div>
 
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize
+        "PRISMRPG.Label.details"
+      }}</a>
+    <a
+      class="item {{tabs.description.cssClass}}"
+      data-tab="description"
+    >{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize
+        "PRISMRPG.Label.effects"
+      }}</a>
+  </nav>
+
+  {{! Onglet Details }}
+  <div
+    class="tab {{tabs.details.cssClass}}"
+    data-group="primary"
+    data-tab="details"
+  >
     <div class="flexrow">
       <div class="align-top">
 
@@ -89,7 +109,14 @@
         toggled=true
       }}
     </fieldset>
+  </div>
 
+  {{! Onglet Description }}
+  <div
+    class="tab {{tabs.description.cssClass}}"
+    data-group="primary"
+    data-tab="description"
+  >
     <fieldset>
       <legend>{{localize "PRISMRPG.Label.description"}}</legend>
       {{formInput
@@ -100,5 +127,15 @@
         toggled=true
       }}
     </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div
+    class="tab {{tabs.effects.cssClass}}"
+    data-group="primary"
+    data-tab="effects"
+  >
+    {{> systems/fvtt-prism-rpg/templates/partial-item-effects.hbs}}
+  </div>
 
 </section>

templates/spell.hbs

@@ -10,6 +10,26 @@
     {{formInput fields.name value=source.name}}
   </div>
 
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize
+        "PRISMRPG.Label.details"
+      }}</a>
+    <a
+      class="item {{tabs.description.cssClass}}"
+      data-tab="description"
+    >{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize
+        "PRISMRPG.Label.effects"
+      }}</a>
+  </nav>
+
+  {{! Onglet Details }}
+  <div
+    class="tab {{tabs.details.cssClass}}"
+    data-group="primary"
+    data-tab="details"
+  >
     {{! Prism RPG: Mana Cost }}
     {{formField
       systemFields.manaCost
@@ -42,42 +62,6 @@
       label="PRISMRPG.Label.prismColor"
     }}
 
-  {{! Prism RPG: Color Effect }}
-  <fieldset class="spell-color-effect">
-    <legend>{{localize "PRISMRPG.Label.colorEffect"}}</legend>
-    {{formInput
-      systemFields.colorEffect
-      enriched=enrichedColorEffect
-      value=system.colorEffect
-      name="system.colorEffect"
-      toggled=true
-    }}
-  </fieldset>
-
-  {{! Prism RPG: Spell Ascension }}
-  <fieldset class="spell-ascension">
-    <legend>{{localize "PRISMRPG.Label.spellAscension"}}</legend>
-    <div class="form-group">
-      <label>{{localize "PRISMRPG.Label.canAscend"}}</label>
-      <input
-        type="checkbox"
-        name="system.canAscend"
-        {{checked system.canAscend}}
-      />
-      <p class="hint">{{localize "PRISMRPG.Hint.spellAscension"}}</p>
-    </div>
-    {{#if system.canAscend}}
-      <label>{{localize "PRISMRPG.Label.ascensionEffect"}}</label>
-      {{formInput
-        systemFields.ascensionEffect
-        enriched=enrichedAscensionEffect
-        value=system.ascensionEffect
-        name="system.ascensionEffect"
-        toggled=true
-      }}
-    {{/if}}
-  </fieldset>
-
     {{! Spell Properties }}
     {{formField
       systemFields.memorized
@@ -140,6 +124,49 @@
       label="PRISMRPG.Label.keywords"
     }}
 
+    {{! Prism RPG: Color Effect }}
+    <fieldset class="spell-color-effect">
+      <legend>{{localize "PRISMRPG.Label.colorEffect"}}</legend>
+      {{formInput
+        systemFields.colorEffect
+        enriched=enrichedColorEffect
+        value=system.colorEffect
+        name="system.colorEffect"
+        toggled=true
+      }}
+    </fieldset>
+
+    {{! Prism RPG: Spell Ascension }}
+    <fieldset class="spell-ascension">
+      <legend>{{localize "PRISMRPG.Label.spellAscension"}}</legend>
+      <div class="form-group">
+        <label>{{localize "PRISMRPG.Label.canAscend"}}</label>
+        <input
+          type="checkbox"
+          name="system.canAscend"
+          {{checked system.canAscend}}
+        />
+        <p class="hint">{{localize "PRISMRPG.Hint.spellAscension"}}</p>
+      </div>
+      {{#if system.canAscend}}
+        <label>{{localize "PRISMRPG.Label.ascensionEffect"}}</label>
+        {{formInput
+          systemFields.ascensionEffect
+          enriched=enrichedAscensionEffect
+          value=system.ascensionEffect
+          name="system.ascensionEffect"
+          toggled=true
+        }}
+      {{/if}}
+    </fieldset>
+  </div>
+
+  {{! Onglet Description }}
+  <div
+    class="tab {{tabs.description.cssClass}}"
+    data-group="primary"
+    data-tab="description"
+  >
     <fieldset>
       <legend>{{localize "PRISMRPG.Label.description"}}</legend>
       {{formInput
@@ -150,5 +177,15 @@
         toggled=true
       }}
     </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div
+    class="tab {{tabs.effects.cssClass}}"
+    data-group="primary"
+    data-tab="effects"
+  >
+    {{> systems/fvtt-prism-rpg/templates/partial-item-effects.hbs}}
+  </div>
 
 </section>

templates/weapon.hbs

@@ -10,6 +10,15 @@
     {{formInput fields.name value=source.name}}
   </div>
 
+  {{! Navigation des onglets }}
+  <nav class="sheet-tabs tabs" data-group="primary">
+    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize "PRISMRPG.Label.details"}}</a>
+    <a class="item {{tabs.description.cssClass}}" data-tab="description">{{localize "PRISMRPG.Label.description"}}</a>
+    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize "PRISMRPG.Label.effects"}}</a>
+  </nav>
+
+  {{! Onglet Details }}
+  <div class="tab {{tabs.details.cssClass}}" data-group="primary" data-tab="details">
   <div class="flexrow">
     <div class="align-top">
 
@@ -176,7 +185,10 @@
       <p class="hint">{{localize "PRISMRPG.Hint.noManeuvers"}}</p>
     {{/unless}}
   </fieldset>
+  </div>
 
+  {{! Onglet Description }}
+  <div class="tab {{tabs.description.cssClass}}" data-group="primary" data-tab="description">
     <fieldset>
       <legend>{{localize "PRISMRPG.Label.description"}}</legend>
       {{formInput
@@ -187,4 +199,11 @@
         toggled=true
       }}
     </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div class="tab {{tabs.effects.cssClass}}" data-group="primary" data-tab="effects">
+    {{> systems/fvtt-prism-rpg/templates/partial-item-effects.hbs}}
+  </div>
+
 </section>