Compendium Browser (#821)

lang/en.json

@@ -2368,7 +2368,8 @@
                 "compendiumBrowser": "Compendium Browser",
                 "rulesOn": "Rules On",
                 "rulesOff": "Rules Off",
-                "remainingUses": "Uses refresh on {type}"
+                "remainingUses": "Uses refresh on {type}",
+                "rightClickExtand": "Right-Click to extand"
             }
         }
     }

module/applications/characterCreation/characterCreation.mjs

@@ -383,7 +383,7 @@ export default class DhCharacterCreation extends HandlebarsApplicationMixin(Appl
                         uuid: suggestions.armor?.uuid,
                         taken: suggestions.armor?.uuid === this.equipment.armor?.uuid
                     },
-                    compendium: 'armors'
+                    compendium: 'armor'
                 };
                 context.primaryWeapon = {
                     ...this.equipment.primaryWeapon,
@@ -392,7 +392,7 @@ export default class DhCharacterCreation extends HandlebarsApplicationMixin(Appl
                         uuid: suggestions.primaryWeapon?.uuid,
                         taken: suggestions.primaryWeapon?.uuid === this.equipment.primaryWeapon?.uuid
                     },
-                    compendium: 'weapons'
+                    compendium: 'weapon'
                 };
                 context.secondaryWeapon = {
                     ...this.equipment.secondaryWeapon,
@@ -402,7 +402,7 @@ export default class DhCharacterCreation extends HandlebarsApplicationMixin(Appl
                         taken: suggestions.secondaryWeapon?.uuid === this.equipment.secondaryWeapon?.uuid
                     },
                     disabled: this.equipment.primaryWeapon?.system?.burden === burden.twoHanded.value,
-                    compendium: 'weapons'
+                    compendium: 'weapon'
                 };
                 context.inventory = {
                     take: suggestions.inventory.take,
@@ -500,11 +500,12 @@ export default class DhCharacterCreation extends HandlebarsApplicationMixin(Appl
     }
 
     static async viewCompendium(event, target) {
-        const type = target.dataset.compendium ?? target.dataset.type;
+        const type = target.dataset.compendium ?? target.dataset.type,
+            equipment = ['armor', 'weapon'];
 
         const presets = {
             compendium: 'daggerheart',
-            folder: type,
+            folder: equipment.includes(type) ? "equipments" : type,
             render: {
                 noFolder: true
             }
@@ -516,6 +517,12 @@ export default class DhCharacterCreation extends HandlebarsApplicationMixin(Appl
                 'system.domain': { key: 'system.domain', value: this.setup.class?.system.domains ?? null }
             };
 
+        if (equipment.includes(type))
+            presets.filter = {
+                'system.tier': { key: 'system.tier', value: 1 },
+                'type': { key: 'type', value: type }
+            };
+
         return (this.itemBrowser = await new ItemBrowser({ presets }).render({ force: true }));
     }
 

module/applications/ui/itemBrowser.mjs

@@ -121,6 +121,16 @@ export class ItemBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
         }
     }
 
+    _attachPartListeners(partId, htmlElement, options) {
+        super._attachPartListeners(partId, htmlElement, options);
+
+        htmlElement
+            .querySelectorAll('[data-action="selectFolder"]')
+            .forEach(element => element.addEventListener("contextmenu", (event) => {
+                event.target.classList.toggle('expanded');
+            }))
+    }
+
     /* -------------------------------------------- */
     /*  Rendering                                   */
     /* -------------------------------------------- */
@@ -179,9 +189,20 @@ export class ItemBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
         }
 
         this.items = ItemBrowser.sortBy(items, 'name');
+
+        if(target) {
+            target.closest('.compendium-sidebar').querySelectorAll('[data-action="selectFolder"]').forEach(element => element.classList.remove("is-selected"))
+            target.classList.add('is-selected');
+        }
+
         this.render({ force: true });
     }
 
+    _replaceHTML(result, content, options) {
+        if(!options.isFirstRender) delete result.sidebar;
+        super._replaceHTML(result, content, options);
+    }
+
     static expandContent(_, target) {
         const parent = target.parentElement;
         parent.classList.toggle('expanded');

module/config/itemBrowserConfig.mjs

@@ -325,7 +325,7 @@ export const compendiumConfig = {
             "equipments": {
                 id: "equipments",
                 keys: ["armors", "weapons", "consumables", "loot"],
-                label: "Equipments",
+                label: "Equipment",
                 type: ["armor", "weapon", "consumable", "loot"],
                 listType: "items"
             },

styles/less/ui/item-browser/item-browser.less

@@ -175,12 +175,23 @@
             display: flex;
             flex-direction: column;
             [data-folder-id] {
-                padding: 5px 10px;
+                display: flex;
+                justify-content: space-between;
+                padding: 10px;
                 border: 1px solid transparent;
                 font-family: @font-body;
                 transition: all 0.1s ease;
+
+                &.expanded + .subfolder-list {
+                    grid-template-rows: 1fr;
                 }
 
+                &:has(+ .subfolder-list):after {
+                    content: "+";
+                }
+            }
+
+            [data-folder-id]:has(+ .subfolder-list .is-selected),
             .is-selected,
             [data-folder-id]:hover {
                 font-weight: bold;
@@ -190,9 +201,15 @@
             }
 
             .subfolder-list {
-                margin: 5px 0;
+                display: grid;
+                grid-template-rows: 0fr;
+                transition: grid-template-rows 0.3s ease-in-out;
                 gap: 0;
 
+                [data-folder-id] {
+                    padding: 5px 10px;
+                }
+
                 .is-selected,
                 [data-folder-id]:hover {
                     font-weight: bold;
@@ -200,6 +217,10 @@
                     background-color: light-dark(@dark-blue-10, @golden-10);
                     color: light-dark(@dark-blue, @golden);
                 }
+
+                .wrapper {
+                    overflow: hidden;
+                }
             }
         }
 

templates/ui/itemBrowser/sidebar.hbs

@@ -7,9 +7,11 @@
             </summary>
             <div class="folder-list">
                 {{#each folders}}
-                    <div class="{{#if selected}} is-selected{{/if}}" data-action="selectFolder" data-folder-id="{{id}}">{{label}}</div>
+                    <div class="{{#if selected}} is-selected{{/if}}" data-action="selectFolder" data-folder-id="{{id}}" {{#if folders.length}}data-tooltip="DAGGERHEART.UI.Tooltip.rightClickExtand" data-tooltip-direction="RIGHT"{{/if}}>{{label}}</div>
                     {{!-- <div data-action="selectFolder" data-folder-id="{{id}}">{{label}}</div> --}}
+                    {{#if folders.length}}
                         <div class="subfolder-list">
+                            <div class="wrapper">
                                 {{#each folders}}
                                     <div
                                         class="subfolder-item {{#if selected}} is-selected{{/if}}"
@@ -20,6 +22,8 @@
                                     </div>
                                 {{/each}}
                             </div>
+                        </div>
+                    {{/if}}
                 {{/each}}
             </div>
         <line-div></line-div>