Add ability to toggle between list and card views

module/applications/sheets/character.mjs

@@ -25,6 +25,7 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
             toggleStress: this.toggleStress,
             toggleHope: this.toggleHope,
             toggleGold: this.toggleGold,
+            toggleLoadoutView: this.toggleLoadoutView,
             attackRoll: this.attackRoll,
             useDomainCard: this.useDomainCard,
             removeCard: this.removeDomainCard,
@@ -291,7 +292,8 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
             loadout: {
                 top: loadout.slice(0, Math.min(2, nrLoadoutCards)),
                 bottom: nrLoadoutCards > 2 ? loadout.slice(2, Math.min(5, nrLoadoutCards)) : [],
-                nrTotal: nrLoadoutCards
+                nrTotal: nrLoadoutCards,
+                listView: this.document.system.layout.listView
             },
             vault: vault.map(x => ({
                 ...x,
@@ -447,6 +449,11 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
         await this.document.update({ [update]: newValue });
     }
 
+    static async toggleLoadoutView(_, button) {
+        const listView = !(button.dataset.value === 'true');
+        await this.document.update({ 'system.layout.listView': listView });
+    }
+
     static async attackRoll(event, button) {
         const weapon = await fromUuid(button.dataset.weapon);
         if (!weapon) return;

module/data/actor/character.mjs

@@ -90,6 +90,9 @@ export default class DhCharacter extends BaseDataActor {
                 attack: new fields.NumberField({ integer: true, initial: 0 }),
                 spellcast: new fields.NumberField({ integer: true, initial: 0 }),
                 armorScore: new fields.NumberField({ integer: true, initial: 0 })
+            }),
+            layout: new fields.SchemaField({
+                listView: new fields.BooleanField({ initial: true })
             })
         };
     }

styles/daggerheart.css

@@ -3956,7 +3956,7 @@ div.daggerheart.views.multiclass {
   z-index: 1;
   color: light-dark(#18162e50, #efe6d850);
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view {
   background: light-dark(#18162e10, #18162e);
   border: 1px solid light-dark(#18162e, #f3c267);
   border-radius: 15px;
@@ -3964,24 +3964,24 @@ div.daggerheart.views.multiclass {
   gap: 0;
   width: 62px;
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span {
   margin: 1px;
   width: 26px;
   color: light-dark(#18162e, #f3c267);
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.list-icon i {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.list-icon i {
   margin-left: 3px;
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.grid-icon i {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.grid-icon i {
   margin-right: 3px;
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.list-active {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.list-active {
   border-radius: 32px 3px 3px 32px;
   background-color: light-dark(#18162e, #f3c267);
   color: light-dark(#efe6d8, #18162e);
   padding: 2px;
 }
-.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.grid-active {
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.grid-active {
   border-radius: 3px 32px 32px 3px;
   background-color: light-dark(#18162e, #f3c267);
   color: light-dark(#efe6d8, #18162e);

styles/less/actors/character/loadout.less

@@ -43,7 +43,7 @@
                 }
             }
 
-            .btn-toogle-view {
+            .btn-toggle-view {
                 background: light-dark(@dark-blue-10, @dark-blue);
                 border: 1px solid light-dark(@dark-blue, @golden);
                 border-radius: 15px;

templates/sheets/actors/character/loadout.hbs

@@ -11,18 +11,29 @@
             <input type="text" name="" id="" placeholder="Search...">
         </div>
         <a><i class="fa-solid fa-filter"></i></a>
-        <button class="btn-toogle-view">
-            <span class="{{#if listView}}list-active{{/if}}list-active list-icon">
+        <button class="btn-toggle-view" data-action="toggleLoadoutView" data-value="{{this.abilities.loadout.listView}}">
+            <span class="{{#if this.abilities.loadout.listView}}list-active{{/if}} list-icon">
                 <i class="fa-solid fa-bars"></i>
             </span>
-            <span class="{{#if gridView}}grid-active{{/if}} grid-icon">
+            <span class="{{#unless this.abilities.loadout.listView}}grid-active{{/unless}} grid-icon">
                 <i class="fa-solid fa-grip"></i>
             </span>
         </button>
     </div>
 
     <div class="items-section">
+        {{#if this.abilities.loadout.listView}}
         {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.PC.Tabs.Loadout') type='domainCard' isGlassy=true cardView='list'}}
+        {{else}}
+        {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.PC.Tabs.Loadout') type='domainCard' isGlassy=true cardView='card'}}
+        {{/if}}
+
+        {{#if this.abilities.loadout.listView}}
         {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.PC.Tabs.Vault') type='domainCard' isGlassy=true cardView='list'}}
+        {{else}}
+        {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.PC.Tabs.Vault') type='domainCard' isGlassy=true cardView='card'}}
+        {{/if}}
+        
+        
     </div>
 </section>

templates/sheets/global/partials/inventory-fieldset-items.hbs

@@ -1,38 +1,40 @@
 <fieldset class="{{#if isGlassy}}glassy{{/if}}">
     <legend>{{title}}</legend>
     <ul class="items-list">
-        {{#each document.items as |item|}}
-            {{#if (eq item.type ../type)}}
-                {{#unless (or (eq ../type 'ancestry') (eq item.type 'class') (eq item.type 'subclass'))}}
-                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=item type=../type}}
-                {{/unless}}
-            {{/if}}
-        {{/each}}
-        {{#each document.system.ancestry.system.actions as |action|}}
-            {{#if (or (eq ../type 'ancestry'))}}
-                {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=action type=../type}}
-            {{/if}}
-        {{/each}}
-        {{#each document.system.ancestry.system.actions as |action|}}
-            {{#if (or (eq ../type 'ancestry'))}}
-                {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=action type=../type}}
-            {{/if}}
-        {{/each}}
-        {{#each document.system.class.value.system.classFeatures as |classFeature|}}
-            {{#if (or (eq ../type 'class'))}}
-                {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=classFeature type=../type}}
-            {{/if}}
-        {{/each}}
-        {{#each document.system.class.value.system.classFeatures as |classFeature|}}
-            {{#if (or (eq ../type 'class'))}}
-                {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=classFeature type=../type}}
-            {{/if}}
-        {{/each}}
-        {{#each document.appliedEffects as |effect|}}
-            {{#if (or (eq ../type 'effect'))}}
-                {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=effect type=../type}}
-            {{/if}}
-        {{/each}}
+        {{#unless (eq cardView 'card') }}
+            {{#each document.items as |item|}}
+                {{#if (eq item.type ../type)}}
+                    {{#unless (or (eq ../type 'ancestry') (eq item.type 'class') (eq item.type 'subclass'))}}
+                        {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=item type=../type}}
+                    {{/unless}}
+                {{/if}}
+            {{/each}}
+            {{#each document.system.ancestry.system.actions as |action|}}
+                {{#if (or (eq ../type 'ancestry'))}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=action type=../type}}
+                {{/if}}
+            {{/each}}
+            {{#each document.system.ancestry.system.actions as |action|}}
+                {{#if (or (eq ../type 'ancestry'))}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=action type=../type}}
+                {{/if}}
+            {{/each}}
+            {{#each document.system.class.value.system.classFeatures as |classFeature|}}
+                {{#if (or (eq ../type 'class'))}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=classFeature type=../type}}
+                {{/if}}
+            {{/each}}
+            {{#each document.system.class.value.system.classFeatures as |classFeature|}}
+                {{#if (or (eq ../type 'class'))}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=classFeature type=../type}}
+                {{/if}}
+            {{/each}}
+            {{#each document.appliedEffects as |effect|}}
+                {{#if (or (eq ../type 'effect'))}}
+                    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=effect type=../type}}
+                {{/if}}
+            {{/each}}
+        {{/unless}}
         
     </ul>
     <ul class="card-list">