Initial chat message description design change

module/applications/dialogs/d20RollDialog.mjs

@@ -165,9 +165,10 @@ export default class D20RollDialog extends HandlebarsApplicationMixin(Applicatio
         }
         if (rest.hasOwnProperty('trait')) {
             this.config.roll.trait = rest.trait;
-            this.config.title = game.i18n.format('DAGGERHEART.UI.Chat.dualityRoll.abilityCheckTitle', {
-                ability: game.i18n.localize(abilities[this.config.roll.trait]?.label)
-            });
+            if (!this.config.source.item)
+                this.config.title = game.i18n.format('DAGGERHEART.UI.Chat.dualityRoll.abilityCheckTitle', {
+                    ability: game.i18n.localize(abilities[this.config.roll.trait]?.label)
+                });
         }
         this.config.extraFormula = rest.extraFormula;
         this.render();

module/data/action/baseAction.mjs

@@ -240,9 +240,12 @@ export default class DHBaseAction extends ActionMixin(foundry.abstract.DataModel
      * @returns {object}
      */
     prepareBaseConfig(event) {
+        const isActor = this.item instanceof CONFIG.Actor.documentClass;
+        const isItem = this.item instanceof CONFIG.Item.documentClass;
+
         const config = {
             event,
-            title: `${this.item instanceof CONFIG.Actor.documentClass ? '' : `${this.item.name}: `}${game.i18n.localize(this.name)}`,
+            title: `${isActor || isItem ? '' : `${this.item.name}: `}${game.i18n.localize(this.name)}`,
             source: {
                 item: this.item._id,
                 originItem: this.originItem,

module/data/chat-message/actorRoll.mjs

@@ -31,6 +31,7 @@ export default class DHActorRoll extends foundry.abstract.TypeDataModel {
     static defineSchema() {
         return {
             title: new fields.StringField(),
+            actionDescription: new fields.HTMLField(),
             roll: new fields.ObjectField(),
             targets: targetsField(),
             hasRoll: new fields.BooleanField({ initial: false }),

module/dice/dhRoll.mjs

@@ -98,8 +98,14 @@ export default class DHRoll extends Roll {
     static async toMessage(roll, config) {
         const item = config.data.parent?.items?.get?.(config.source.item) ?? null;
         const action = item ? item.system.actions.get(config.source.action) : null;
-        if (action?.chatDisplay && !config.actionChatMessageHandled) {
-            await action.toChat();
+        let actionDescription = null;
+        if (action?.chatDisplay) {
+            actionDescription = action
+                ? await foundry.applications.ux.TextEditor.implementation.enrichHTML(action.description, {
+                      relativeTo: config.data,
+                      rollData: config.data.getRollData?.() ?? {}
+                  })
+                : null;
             config.actionChatMessageHandled = true;
         }
 
@@ -110,7 +116,7 @@ export default class DHRoll extends Roll {
                 title: roll.title,
                 speaker: cls.getSpeaker({ actor: roll.data?.parent }),
                 sound: config.mute ? null : CONFIG.sounds.dice,
-                system: config,
+                system: { ...config, actionDescription },
                 rolls: [roll]
             };
 

module/documents/chatMessage.mjs

@@ -101,7 +101,7 @@ export default class DhpChatMessage extends foundry.documents.ChatMessage {
                     CONFIG.DH.id,
                     CONFIG.DH.SETTINGS.gameSettings.appearance
                 ).expandRollMessage,
-                rollSections = html.querySelectorAll('.roll-part'),
+                rollSections = html.querySelectorAll('.roll-part, .description-section'),
                 itemDesc = html.querySelector('.domain-card-move');
             rollSections.forEach(s => {
                 if (s.classList.contains('roll-section')) {
@@ -110,6 +110,8 @@ export default class DhpChatMessage extends foundry.documents.ChatMessage {
                 } else if (s.classList.contains('damage-section'))
                     s.classList.toggle('expanded', autoExpandRoll.damage);
                 else if (s.classList.contains('target-section')) s.classList.toggle('expanded', autoExpandRoll.target);
+                else if (s.classList.contains('description-section'))
+                    s.classList.toggle('expanded', autoExpandRoll.desc);
             });
             if (itemDesc && autoExpandRoll.desc) itemDesc.setAttribute('open', '');
         }

module/systemRegistration/handlebars.mjs

@@ -39,6 +39,7 @@ export const preloadHandlebarsTemplates = async function () {
         'systems/daggerheart/templates/dialogs/downtime/activities.hbs',
         'systems/daggerheart/templates/dialogs/dice-roll/costSelection.hbs',
         'systems/daggerheart/templates/ui/chat/parts/roll-part.hbs',
+        'systems/daggerheart/templates/ui/chat/parts/description-part.hbs',
         'systems/daggerheart/templates/ui/chat/parts/damage-part.hbs',
         'systems/daggerheart/templates/ui/chat/parts/target-part.hbs',
         'systems/daggerheart/templates/ui/chat/parts/button-part.hbs',

styles/less/ui/chat/action.less

@@ -38,124 +38,6 @@
         flex-direction: column;
         align-items: center;
 
-        details[open] {
-            .fa-chevron-down {
-                transform: rotate(180deg);
-                transition: all 0.3s ease;
-            }
-        }
-
-        .action-move {
-            width: 100%;
-
-            .fa-chevron-down {
-                transition: all 0.3s ease;
-                margin-left: auto;
-            }
-
-            .action-section {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                margin: 8px 8px 0;
-                padding-bottom: 5px;
-                width: -webkit-fill-available;
-                gap: 5px;
-                border-bottom: 1px solid @golden;
-
-                &:hover {
-                    background: @golden-10;
-                    cursor: pointer;
-                    transition: all 0.3s ease;
-                }
-
-                .action-img {
-                    width: 40px;
-                    height: 40px;
-                    border-radius: 3px;
-                    object-fit: cover;
-                }
-
-                .action-header {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 5px;
-                    color: @beige;
-
-                    .title {
-                        font-size: var(--font-size-20);
-                        color: @golden;
-                        font-weight: 700;
-                    }
-
-                    .label {
-                        font-size: var(--font-size-12);
-                        color: @beige;
-                        margin: 0;
-                    }
-                }
-            }
-        }
-
-        .description {
-            padding: 8px;
-
-            .summons-header {
-                font-size: var(--font-size-14);
-                text-align: center;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                span {
-                    width: 100%;
-                }
-
-                &:before,
-                &:after {
-                    content: ' ';
-                    height: 1px;
-                    width: 100%;
-                }
-
-                &:before {
-                    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, light-dark(@dark-blue, @golden) 100%);
-                }
-
-                &:after {
-                    background: linear-gradient(90deg, light-dark(@dark-blue, @golden) 0%, rgba(0, 0, 0, 0) 100%);
-                }
-            }
-
-            .summons-container {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-
-                .summon-container {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-
-                    .summon-label-container {
-                        flex: 1;
-                        display: flex;
-                        align-items: center;
-                        gap: 4px;
-
-                        img {
-                            height: 32px;
-                        }
-
-                        label {
-                            display: flex;
-                            flex-wrap: wrap;
-                        }
-                    }
-                }
-            }
-        }
-
         .ability-card-footer {
             display: flex;
             flex-wrap: wrap;

styles/less/ui/chat/chat.less

@@ -286,6 +286,7 @@
 
                         > :first-child:not(.target-selector) {
                             margin-top: 5px;
+                            text-align: center;
                         }
 
                         > :last-child {
@@ -573,6 +574,39 @@
             }
         }
 
+        .chat-roll .description-section {
+            background: @dark-80;
+            border-radius: 6px;
+
+            .description-header {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 2px;
+
+                .description-header-title {
+                    color: @golden;
+                    font-size: var(--font-size-16);
+                }
+
+                .description-header-subtitle {
+                    font-size: var(--font-size-14);
+                    padding-bottom: 2px;
+                }
+            }
+
+            .roll-part-content .dice-tooltip .wrapper {
+                i {
+                    margin: 0;
+                }
+
+                > :first-child:not(.target-selector) {
+                    margin: 0;
+                }
+            }
+        }
+
         .roll-buttons {
             display: flex;
             gap: 5px;
@@ -590,5 +624,124 @@
         .dice-roll .dice-tooltip fieldset {
             margin-bottom: 5px;
         }
+
+        details[open] {
+            .fa-chevron-down {
+                transform: rotate(180deg);
+                transition: all 0.3s ease;
+            }
+        }
+
+        .action-move {
+            width: 100%;
+
+            .fa-chevron-down {
+                transition: all 0.3s ease;
+                margin-left: auto;
+            }
+
+            .action-section {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                margin: 8px 8px 0;
+                padding-bottom: 5px;
+                width: -webkit-fill-available;
+                gap: 5px;
+                border-bottom: 1px solid @golden;
+
+                &:hover {
+                    background: @golden-10;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                }
+
+                .action-img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 3px;
+                    object-fit: cover;
+                }
+
+                .action-header {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 5px;
+                    color: @beige;
+
+                    .title {
+                        font-size: var(--font-size-20);
+                        color: @golden;
+                        font-weight: 700;
+                        margin: 0;
+                    }
+
+                    .label {
+                        font-size: var(--font-size-12);
+                        color: @beige;
+                        margin: 0;
+                    }
+                }
+            }
+        }
+
+        .description {
+            padding: 8px;
+
+            .summons-header {
+                font-size: var(--font-size-14);
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                span {
+                    width: 100%;
+                }
+
+                &:before,
+                &:after {
+                    content: ' ';
+                    height: 1px;
+                    width: 100%;
+                }
+
+                &:before {
+                    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, light-dark(@dark-blue, @golden) 100%);
+                }
+
+                &:after {
+                    background: linear-gradient(90deg, light-dark(@dark-blue, @golden) 0%, rgba(0, 0, 0, 0) 100%);
+                }
+            }
+
+            .summons-container {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+
+                .summon-container {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+
+                    .summon-label-container {
+                        flex: 1;
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
+
+                        img {
+                            height: 32px;
+                        }
+
+                        label {
+                            display: flex;
+                            flex-wrap: wrap;
+                        }
+                    }
+                }
+            }
+        }
     }
 }

templates/ui/chat/parts/description-part.hbs

@@ -0,0 +1,14 @@
+<div class="dice-roll description-section" data-action="expandRoll">
+    <div class="description-header">
+        <div class="description-header-title">{{title}}</div>
+        <div class="description-header-subtitle">{{title}}</div>
+    </div>
+
+    <div class="roll-part-content description-content">
+        <div class="dice-tooltip">
+            <div class="wrapper">
+                <i>{{{actionDescription}}}</i>
+            </div>
+        </div>
+    </div>
+</div>

templates/ui/chat/roll.hbs

@@ -1,4 +1,5 @@
 <div class="chat-roll">
+    {{#if actionDescription}}{{> 'systems/daggerheart/templates/ui/chat/parts/description-part.hbs'}}{{/if}}
     <div class="roll-part-header"><span>{{title}}</span></div>
     {{#if hasRoll}}{{> 'systems/daggerheart/templates/ui/chat/parts/roll-part.hbs'}}{{/if}}
     {{#if (or hasDamage hasHealing)}}{{> 'systems/daggerheart/templates/ui/chat/parts/damage-part.hbs'}}{{/if}}