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;

lang/en.json

@@ -402,6 +402,7 @@
       "damage": "Damage",
       "description": "Description",
       "details": "Details",
+      "effects": "Effects",
       "dex": "DEX",
       "equipment": "Equipment",
       "experience": "Experience",

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

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;

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,6 +68,46 @@
       label="PRISMRPG.Label.equipped"
     }}
 
+    {{! Cost }}
+    {{formField
+      systemFields.cost
+      value=system.cost
+      localize=true
+      label="PRISMRPG.Label.cost"
+    }}
+    {{formField
+      systemFields.money
+      value=system.money
+      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>
+      {{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"
+  >
     {{! Prism RPG: Armor Passive }}
     <fieldset class="armor-passive">
       <legend>{{localize "PRISMRPG.Label.armorPassive"}}</legend>
@@ -99,16 +159,6 @@
       localize=true
       label="PRISMRPG.Label.currency"
     }}
+  </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,12 +9,39 @@
     />
     {{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}}
 
   {{formField systemFields.isKit value=system.isKit localize=true label="PRISMRPG.Label.isKit"}}
+  </div>
 
+  {{! Onglet Description }}
+  <div class="tab" 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" data-group="primary" data-tab="effects">
   {{#if system.isKit}}
     {{! Kit Passive }}
     <fieldset class="kit-passive">
@@ -73,16 +100,6 @@
       {{/unless}}
     </fieldset>
   {{/if}}
-
+  </div>
-  <fieldset>
-    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
-    {{formInput
-      systemFields.description
-      enriched=enrichedDescription
-      value=system.description
-      name="system.description"
-      toggled=true
-    }}
-  </fieldset>
 
 </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>
@@ -151,7 +150,14 @@
       localize=true
       label="PRISMRPG.Label.level"
     }}
+  </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 +168,34 @@
         toggled=true
       }}
     </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div
+    class="tab {{tabs.effects.cssClass}}"
+    data-group="primary"
+    data-tab="effects"
+  >
+    {{! 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>
 
 </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">
 
@@ -70,7 +90,32 @@
 
       </div>
     </div>
+  </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>
+  </div>
+
+  {{! Onglet Effects }}
+  <div
+    class="tab {{tabs.effects.cssClass}}"
+    data-group="primary"
+    data-tab="effects"
+  >
     {{! Prism RPG: Block Augment }}
     <fieldset class="shield-block-augment">
       <legend>{{localize "PRISMRPG.Label.blockAugment"}}</legend>
@@ -89,16 +134,6 @@
         toggled=true
       }}
     </fieldset>
-
+  </div>
-  <fieldset>
-    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
-    {{formInput
-      systemFields.description
-      enriched=enrichedDescription
-      value=system.description
-      name="system.description"
-      toggled=true
-    }}
-  </fieldset>
 
 </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
@@ -139,7 +123,14 @@
       localize=true
       label="PRISMRPG.Label.keywords"
     }}
+  </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 +141,49 @@
         toggled=true
       }}
     </fieldset>
+  </div>
+
+  {{! Onglet Effects }}
+  <div
+    class="tab {{tabs.effects.cssClass}}"
+    data-group="primary"
+    data-tab="effects"
+  >
+    {{! 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>
 
 </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">
 
@@ -100,7 +109,24 @@
       {{formField systemFields.money value=system.money localize=true}}
     </div>
   </div>
+  </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>
+  </div>
+
+  {{! Onglet Effects }}
+  <div class="tab {{tabs.effects.cssClass}}" data-group="primary" data-tab="effects">
   {{! Prism RPG: Weapon Passives }}
   <fieldset class="weapon-passives">
     <legend>
@@ -176,15 +202,6 @@
       <p class="hint">{{localize "PRISMRPG.Hint.noManeuvers"}}</p>
     {{/unless}}
   </fieldset>
+  </div>
 
-  <fieldset>
-    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
-    {{formInput
-      systemFields.description
-      enriched=enrichedDescription
-      value=system.description
-      name="system.description"
-      toggled=true
-    }}
-  </fieldset>
 </section>