Reduce Action Selection click number & Style Action Type Dialog

module/applications/dialogs/_module.mjs

@@ -7,3 +7,4 @@ export { default as DeathMove } from './deathMove.mjs';
 export { default as Downtime } from './downtime.mjs';
 export { default as OwnershipSelection } from './ownershipSelection.mjs';
 export { default as ResourceDiceDialog } from './resourceDiceDialog.mjs';
+export { default as ActionSelectionDialog } from './actionSelectionDialog.mjs';

module/applications/dialogs/actionSelectionDialog.mjs

@@ -0,0 +1,87 @@
+const { ApplicationV2, HandlebarsApplicationMixin } = foundry.applications.api;
+
+export default class ActionSelectionDialog extends HandlebarsApplicationMixin(ApplicationV2) {
+    constructor(item, event, options={}) {
+        super(options);
+        this.#item = item;
+        this.#event = event;
+    }
+
+    /* -------------------------------------------- */
+
+    /** @override */
+    static DEFAULT_OPTIONS = {
+        classes: ['daggerheart', 'dh-style', 'dialog'],
+        actions: {
+            choose: ActionSelectionDialog.#onChooseAction
+        },
+        position: {
+            width: 400
+        }
+    };
+
+    /* -------------------------------------------- */
+
+    static PARTS = {
+        actions: {
+            template: "systems/daggerheart/templates/dialogs/actionSelect.hbs"
+        }
+    };
+
+    #item;
+
+    get item() {
+        return this.#item;
+    }
+
+    #event;
+
+    get event() {
+        return this.#event;
+    }
+
+    #action;
+
+    get action() {
+        return this.#action ?? null;
+    }
+
+    /* -------------------------------------------- */
+
+    /** @override */
+    get title() {
+        return game.i18n.localize('DAGGERHEART.CONFIG.SelectAction.selectAction');
+    }
+
+    /* -------------------------------------------- */
+
+    /** @inheritDoc */
+    async _prepareContext(options) {
+        const actions = this.#item.system.actionsList,
+            itemName = this.#item.name;
+        return {
+            ...await super._prepareContext(options),
+            actions,
+            itemName
+        }
+    }
+
+    static async #onChooseAction(event, button) {
+        const { actionId } = button.dataset;
+        this.#action = this.#item.system.actionsList.find(a => a._id === actionId);
+        Object.defineProperty(this.#event, 'shiftKey', {
+            get() {
+                return event.shiftKey;
+            }
+        });
+        this.close();
+    }
+
+    static create(item, event, options) {
+        return new Promise(resolve => {
+            const dialog = new this(item, event, options);
+            dialog.addEventListener("close", () => resolve(dialog.action), { once: true });
+            dialog.render({ force: true });
+        });
+    }
+}

module/data/fields/actionField.mjs

@@ -168,9 +168,13 @@ export function ActionMixin(Base) {
             ({ type } =
                 (await foundry.applications.api.DialogV2.input({
                     window: { title: 'Select Action Type' },
+                    classes: ['daggerheart', 'dh-style'],
                     content: await foundry.applications.handlebars.renderTemplate(
                         'systems/daggerheart/templates/actionTypes/actionType.hbs',
-                        { types: CONFIG.DH.ACTIONS.actionTypes }
+                        {
+                          types: CONFIG.DH.ACTIONS.actionTypes,
+                          itemName: parent.parent?.name
+                        }
                     ),
                     ok: {
                         label: game.i18n.format('DOCUMENT.Create', {

module/documents/item.mjs

@@ -1,3 +1,5 @@
+import ActionSelectionDialog from "../applications/dialogs/actionSelectionDialog.mjs";
+
 /**
  * Override and extend the basic Item implementation.
  * @extends {foundry.documents.Item}
@@ -94,41 +96,13 @@ export default class DHItem extends foundry.documents.Item {
         });
     }
 
-    async selectActionDialog(prevEvent) {
-        const content = await foundry.applications.handlebars.renderTemplate(
-                'systems/daggerheart/templates/dialogs/actionSelect.hbs',
-                {
-                    actions: this.system.actionsList,
-                    itemName: this.name
-                }
-            ),
-            title = game.i18n.localize('DAGGERHEART.CONFIG.SelectAction.selectAction');
-
-        return foundry.applications.api.DialogV2.prompt({
-            window: { title },
-            classes: ['daggerheart', 'dh-style'],
-            content,
-            ok: {
-                label: title,
-                callback: (event, button, dialog) => {
-                    Object.defineProperty(prevEvent, 'shiftKey', {
-                        get() {
-                            return event.shiftKey;
-                        }
-                    });
-                    return this.system.actionsList.find(a => a._id === button.form.elements.actionId.value);
-                }
-            }
-        });
-    }
-
     async use(event) {
         const actions = new Set(this.system.actionsList);
         if (actions?.size) {
             let action = actions.first();
             if (actions.size > 1 && !event?.shiftKey) {
                 // Actions Choice Dialog
-                action = await this.selectActionDialog(event);
+                action = await ActionSelectionDialog.create(this, event);
             }
             if (action) return action.use(event);
         }

styles/less/dialog/actions/action-list.less

@@ -12,7 +12,35 @@
             gap: 5px;
 
             .label {
+                display: flex;
+                align-items: center;
+                gap: 10px;
                 font-family: @font-body;
+                cursor: pointer;
+                flex: 1;
+                i {
+                    text-align: center;
+                    width: 30px;
+                }
+            }
+
+            input[type="radio"] {
+                margin-left: auto;
+            }
+
+            button {
+                flex: 1;
+                display: flex;
+                padding: 6px 40px 6px 6px;
+                height: fit-content;
+                img {
+                    width: 30px;
+                }
+                span {
+                    font-family: @font-body;
+                    flex: 1;
+                    font-weight: bold;
+                }
             }
         }
     }

templates/actionTypes/actionType.hbs

@@ -5,8 +5,11 @@
     <ul class="actions-list">
     {{#each types}}
         <li class="action-item">
-            <input type="radio" name="type" value="{{id}}" {{#if (eq @index 0)}}checked{{/if}}>
+            <label class="label" for="{{id}}">
-            <span class="label">{{localize name}}</span>
+                <i class="fa-solid {{icon}} fa-xl"></i>
+                <span class="label">{{localize name}}</span>
+            </label>
+            <input type="radio" name="type" id="{{id}}" value="{{id}}" {{#if (eq @index 0)}}checked{{/if}}>
         </li>
     {{/each}}
     </ul>

templates/dialogs/actionSelect.hbs

@@ -5,8 +5,10 @@
     <ul class="actions-list">
     {{#each actions}}
         <li class="action-item">
-            <input type="radio" id="action-{{_id}}" name="actionId" value="{{_id}}" {{#if (eq @index 0)}}checked{{/if}}>
+            <button type="button" class="list-button" data-action-id="{{id}}" data-action="choose">
-            <label class="label" for="action-{{_id}}">{{ name }}</label>
+                <img src="{{ img }}">
+                <span>{{ name }}</span>
+            </button>
         </li>
     {{/each}}
     </ul>