From f3e87b1641f60f18db689d85641e256decb352e0 Mon Sep 17 00:00:00 2001
From: WBHarry <williambjrklund@gmail.com>
Date: Sun, 8 Feb 2026 16:42:06 +0100
Subject: [PATCH] Improved design

---
 lang/en.json                                  |  4 +-
 .../dialogs/CompendiumBrowserSettings.mjs     | 17 ++++---
 .../compendiumBrowserPackDialog/sheet.less    | 48 +++++--------------
 .../compendiumBrowserSettingsDialog/packs.hbs | 12 +++--
 4 files changed, 30 insertions(+), 51 deletions(-)

diff --git a/lang/en.json b/lang/en.json
index a5621bef..91049556 100755
--- a/lang/en.json
+++ b/lang/en.json
@@ -344,7 +344,9 @@
                 "openCountdowns": "Countdowns"
             },
             "CompendiumBrowserSettings": {
-                "title": "Compendium Browser Settings"
+                "title": "Enable Compendiums",
+                "enableSource": "Enable Source",
+                "disableSource": "Disable Source"
             },
             "ContextMenu": {
                 "disableEffect": "Disable Effect",
diff --git a/module/applications/dialogs/CompendiumBrowserSettings.mjs b/module/applications/dialogs/CompendiumBrowserSettings.mjs
index c0c1ae0c..5137da56 100644
--- a/module/applications/dialogs/CompendiumBrowserSettings.mjs
+++ b/module/applications/dialogs/CompendiumBrowserSettings.mjs
@@ -14,11 +14,11 @@ export default class CompendiumBrowserSettings extends HandlebarsApplicationMixi
         classes: ['daggerheart', 'dialog', 'dh-style', 'views', 'compendium-brower-settings'],
         window: {
             icon: 'fa-solid fa-book',
-            title: 'DAGGERHEART.APPLICATIONS.CompendiumBrowserSettings.title'
+            title: 'DAGGERHEART.APPLICATIONS.CompendiumBrowserSettings.title',
+            resizable: true
         },
         position: {
-            width: 500,
-            height: 'auto'
+            width: 500
         },
         actions: {
             toggleSource: CompendiumBrowserSettings.#toggleSource,
@@ -80,8 +80,7 @@ export default class CompendiumBrowserSettings extends HandlebarsApplicationMixi
     static #toggleSource(event, button) {
         event.stopPropagation();
 
-        const target = button.closest('.source-enable-container');
-        const { type, source } = target.dataset;
+        const { type, source } = button.dataset;
         const currentlyExcluded = this.browserSettings.excludedSources[source]
             ? this.browserSettings.excludedSources[source].excludedDocumentTypes.includes(type)
             : false;
@@ -92,10 +91,10 @@ export default class CompendiumBrowserSettings extends HandlebarsApplicationMixi
             ? this.browserSettings.excludedSources[source].excludedDocumentTypes.filter(x => x !== type)
             : [...(this.browserSettings.excludedSources[source]?.excludedDocumentTypes ?? []), type];
 
-        target.classList.toggle('locked');
-        target.closest('.source-container').querySelector('.checks-container').classList.toggle('collapsed');
-
-        // this.render();
+        const toggleIcon = button.querySelector('a > i');
+        toggleIcon.classList.toggle('fa-toggle-off');
+        toggleIcon.classList.toggle('fa-toggle-on');
+        button.closest('.source-container').querySelector('.checks-container').classList.toggle('collapsed');
     }
 
     toggleTypedPack(event) {
diff --git a/styles/less/dialog/compendiumBrowserPackDialog/sheet.less b/styles/less/dialog/compendiumBrowserPackDialog/sheet.less
index cc10b0c0..0b0f8006 100644
--- a/styles/less/dialog/compendiumBrowserPackDialog/sheet.less
+++ b/styles/less/dialog/compendiumBrowserPackDialog/sheet.less
@@ -2,6 +2,13 @@
     --text-color: light-dark(@dark-blue, @beige);
     color: var(--text-color);
 
+    .window-content > div {
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
     .types-container {
         display: flex;
         flex-direction: column;
@@ -52,39 +59,11 @@
                         .source-inner-label-container {
                             width: 100%;
                             display: flex;
-                            align-items: center;
-                            justify-content: space-between;
-                            gap: 4px;
+                            gap: 8px;
 
-                            .source-enable-container {
-                                width: 148px;
-                                height: 24px;
-                                padding: 2px 4px;
-                                background-color: light-dark(@dark-blue, @golden);
-                                border-radius: 6px;
-                                position: relative;
-                                display: flex;
-                                align-items: center;
-
-                                &.locked {
-                                    opacity: 0.4;
-
-                                    .source-enable-label {
-                                        left: 74px;
-                                    }
-                                }
-
-                                .source-enable-label {
-                                    width: 70px;
-                                    border-radius: 6px;
-                                    border: 1px solid light-dark(@dark-blue, @beige-50);
-                                    text-align: center;
-                                    background-color: light-dark(@golden, @beige);
-                                    color: black;
-                                    position: absolute;
-                                    left: 4px;
-                                    transition: left ease-in 0.4s;
-                                }
+                            i {
+                                font-size: 18px;
+                                // color: light-dark(@dark-blue, @golden);
                             }
                         }
                     }
@@ -94,6 +73,7 @@
     }
 
     .checks-container {
+        padding-left: 24px;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 4px;
@@ -104,10 +84,6 @@
             height: 0px;
         }
 
-        &.inner {
-            padding-left: 24px;
-        }
-
         .check-container {
             display: flex;
             align-items: center;
diff --git a/templates/dialogs/compendiumBrowserSettingsDialog/packs.hbs b/templates/dialogs/compendiumBrowserSettingsDialog/packs.hbs
index 3ea4a22d..c206ad89 100644
--- a/templates/dialogs/compendiumBrowserSettingsDialog/packs.hbs
+++ b/templates/dialogs/compendiumBrowserSettingsDialog/packs.hbs
@@ -9,15 +9,17 @@
                         <div class="source-container">
                             <div class="source-inner-container">
                                 <div class="source-inner-label-container">
-                                    {{!-- <input type="checkbox" class="source-input" data-source="{{@key}}" data-type="{{@../key}}" {{checked source.checked}} /> --}}
-                                    <label>{{source.label}}</label>
-                                    <a class="source-enable-container {{#unless source.checked}}locked{{/unless}}" data-action="toggleSource" data-source="{{@key}}" data-type="{{@../key}}">
-                                        <div class="source-enable-label">{{localize "Active"}}</div>
+                                    <a 
+                                        data-action="toggleSource" data-source="{{@key}}" data-type="{{@../key}}" 
+                                        data-tooltip="{{#if source.checked}}{{localize "DAGGERHEART.APPLICATIONS.CompendiumBrowserSettings.enableSource"}}{{else}}{{localize "DAGGERHEART.APPLICATIONS.CompendiumBrowserSettings.enableSource"}}{{/if}}"
+                                    >
+                                        <i class="fa-solid {{#if source.checked}}fa-toggle-on{{else}}fa-toggle-off{{/if}}"></i>
                                     </a>
+                                    <label>{{source.label}}</label>
                                 </div>
                             </div>
 
-                            <div class="checks-container inner {{#unless source.checked}}collapsed{{/unless}}">
+                            <div class="checks-container {{#unless source.checked}}collapsed{{/unless}}">
                                 {{#each source.packs as |pack|}}
                                     <div class="check-container">
                                         <input type="checkbox" class="pack-checkbox" data-type="{{pack.type}}" data-pack="{{pack.pack}}" {{checked pack.checked}} />