requested changes

module/applications/dialogs/_module.mjs

@@ -1,5 +1,4 @@
 export { default as BeastformDialog } from './beastformDialog.mjs';
-export { default as costSelectionDialog } from './costSelectionDialog.mjs';
 export { default as d20RollDialog } from './d20RollDialog.mjs';
 export { default as DamageDialog } from './damageDialog.mjs';
 export { default as DamageReductionDialog } from './damageReductionDialog.mjs';

module/applications/dialogs/costSelectionDialog.mjs

@@ -1,66 +0,0 @@
-const { ApplicationV2, HandlebarsApplicationMixin } = foundry.applications.api;
-
-export default class CostSelectionDialog extends HandlebarsApplicationMixin(ApplicationV2) {
-    constructor(costs, uses, action, resolve) {
-        super({});
-        this.costs = costs;
-        this.uses = uses;
-        this.action = action;
-        this.resolve = resolve;
-    }
-
-    static DEFAULT_OPTIONS = {
-        tag: 'form',
-        classes: ['daggerheart', 'dialog', 'dh-style', 'views', 'damage-selection'],
-        position: {
-            width: 400,
-            height: 'auto'
-        },
-        actions: {
-            sendCost: this.sendCost
-        },
-        form: {
-            handler: this.updateForm,
-            submitOnChange: true,
-            closeOnSubmit: false
-        }
-    };
-
-    /** @override */
-    static PARTS = {
-        costSelection: {
-            id: 'costSelection',
-            template: 'systems/daggerheart/templates/dialogs/dice-roll/costSelection.hbs'
-        }
-    };
-
-    /* -------------------------------------------- */
-
-    /** @inheritDoc */
-    get title() {
-        return `Cost Options`;
-    }
-
-    async _prepareContext(_options) {
-        const updatedCosts = this.action.calcCosts(this.costs),
-            updatedUses = this.action.calcUses(this.uses);
-        return {
-            costs: updatedCosts,
-            uses: updatedUses,
-            canUse: this.action.hasCost(updatedCosts) && this.action.hasUses(updatedUses)
-        };
-    }
-
-    static async updateForm(event, _, formData) {
-        const data = foundry.utils.expandObject(formData.object);
-        this.costs = foundry.utils.mergeObject(this.costs, data.costs);
-        this.uses = foundry.utils.mergeObject(this.uses, data.uses);
-        this.render(true);
-    }
-
-    static sendCost(event) {
-        event.preventDefault();
-        this.resolve({ costs: this.action.getRealCosts(this.costs), uses: this.uses });
-        this.close();
-    }
-}

module/applications/dialogs/d20RollDialog.mjs

@@ -22,7 +22,7 @@ export default class D20RollDialog extends HandlebarsApplicationMixin(Applicatio
         id: 'roll-selection',
         classes: ['daggerheart', 'dialog', 'dh-style', 'views', 'roll-selection'],
         position: {
-            width: 550
+            width: 'auto'
         },
         window: {
             icon: 'fa-solid fa-dice'

module/systemRegistration/handlebars.mjs

@@ -30,6 +30,7 @@ export const preloadHandlebarsTemplates = async function () {
         'systems/daggerheart/templates/ui/chat/parts/target-chat.hbs',
         'systems/daggerheart/templates/ui/tooltip/parts/tooltipChips.hbs',
         'systems/daggerheart/templates/ui/tooltip/parts/tooltipTags.hbs',
-        'systems/daggerheart/templates/dialogs/downtime/activities.hbs'
+        'systems/daggerheart/templates/dialogs/downtime/activities.hbs',
+        'systems/daggerheart/templates/dialogs/dice-roll/costSelection.hbs'
     ]);
 };

styles/less/dialog/dice-roll/roll-selection.less

@@ -13,6 +13,7 @@
         display: flex;
         flex-direction: column;
         gap: 12px;
+        max-width: 550px;
 
         .dices-section {
             display: flex;

styles/less/global/elements.less

@@ -15,6 +15,10 @@
         color: light-dark(@dark-blue, @golden);
         border: 1px solid light-dark(@dark, @beige);
 
+        &::placeholder {
+            color: light-dark(@dark-40, @beige-50);
+        }
+
         &:hover[type='text'],
         &:hover[type='number'],
         &:focus[type='text'],
@@ -48,6 +52,24 @@
         }
     }
 
+    input[type='range'] {
+        &::-webkit-slider-runnable-track {
+            background: light-dark(@dark-blue-40, @golden-40);
+        }
+        &::-moz-range-track {
+            background: light-dark(@dark-blue-40, @golden-40);
+        }
+        &::-webkit-slider-thumb {
+            background: light-dark(@dark-blue, @golden);
+            border: none;
+            border-radius: 50%;
+
+            &:hover {
+                box-shadow: 0 0 8px light-dark(@dark-blue, @golden);
+            }
+        }
+    }
+
     button {
         background: light-dark(transparent, @golden);
         border: 1px solid light-dark(@dark-blue, @dark-blue);
@@ -296,6 +318,31 @@
             }
         }
 
+        .scalable-input {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+
+            .form-group {
+                width: fit-content;
+                .nest-inputs {
+                    width: fit-content;
+                }
+            }
+
+            label {
+                font-family: @font-body;
+                font-size: 14px;
+                font-weight: 400;
+
+                &.modifier-label {
+                    width: 6ch;
+                    text-align: end;
+                }
+            }
+        }
+
         &:has(.list-w-img) {
             gap: 0;
         }

templates/dialogs/dice-roll/costSelection.hbs

@@ -1,21 +1,30 @@
-<div>
+<fieldset class="one-column">
+    <legend>{{localize 'DAGGERHEART.GENERAL.Cost.single'}}</legend>
+    <ul>
         {{#if uses}}
+            <li class="scalable-input">
                 <div class="form-group">
-            <div class="form-fields">
+                    <div class="form-fields nest-inputs">
-                <label for="uses.enabled">Uses: {{uses.value}}/{{uses.max}}</label>
                         <input name="uses.enabled" type="checkbox"{{#if uses.enabled}} checked{{/if}}>
+                        <label for="uses.enabled">Uses</label>
                     </div>
                 </div>
+                <label class="modifier-label">{{uses.value}}/{{uses.max}}</label>
+            </li>
         {{/if}}
         {{#each costs as | cost index |}}
+        <li class="scalable-input">
             <div class="form-group">
-            <div class="form-fields">
+                <div class="form-fields nest-inputs">
-                <label>{{label}}: {{total}}</label>
                     <input name="costs.{{index}}.enabled" type="checkbox"{{#if enabled}} checked{{/if}}>
+                    <label>{{label}}</label>
+                </div>
+            </div>
             {{#if scalable}}
                 <input type="range" value="{{scale}}" min="1" max="10" step="{{step}}" name="costs.{{index}}.scale">
             {{/if}}
-            </div>
+            <label class="modifier-label">{{total}}/10</label>
-        </div>
+        </li>
         {{/each}}
-</div>
+    </ul>
+</fieldset>

templates/dialogs/dice-roll/rollSelection.hbs

@@ -135,11 +135,8 @@
                     {{#if (eq @root.rollType 'DualityRoll')}}<span class="formula-label">{{localize "DAGGERHEART.GENERAL.situationalBonus"}}</span>{{/if}}
                     <input type="text" value="{{extraFormula}}" name="extraFormula" placeholder="{{#if (eq @root.rollType 'DualityRoll')}}Ex: 1d6 + 5{{else}}Situational Bonus{{/if}}">
                 </fieldset>
-                {{#if costs}}
+                {{#if (or costs uses)}}
-                    <fieldset>
-                        <legend>{{localize 'DAGGERHEART.General.Cost.single'}}</legend>
                     {{> 'systems/daggerheart/templates/dialogs/dice-roll/costSelection.hbs'}}
-                    </fieldset>
                 {{/if}}
             {{/unless}}
             <span class="formula-label"><b>{{localize "DAGGERHEART.GENERAL.formula"}}:</b> {{@root.formula}}</span>
@@ -153,6 +150,9 @@
                 </button>
             </div>
     {{else}}
+        {{#if (or costs uses)}}
+            {{> 'systems/daggerheart/templates/dialogs/dice-roll/costSelection.hbs'}}
+        {{/if}}
         <button class="sunmit-btn" data-action="submitRoll"{{#unless canRoll}} disabled{{/unless}}>
             <span class="label">{{localize "DAGGERHEART.GENERAL.continue"}}</span>
         </button>