From 74f7f1f158a5b7d9f098aa5327a6c0f3f8851d96 Mon Sep 17 00:00:00 2001
From: moliloo <dev.murilobrito@gmail.com>
Date: Tue, 29 Jul 2025 00:56:42 -0300
Subject: [PATCH] add colapsable descriptions in chat messages

---
 module/applications/dialogs/deathMove.mjs |  2 +-
 styles/less/ui/chat/ability-use.less      | 85 ++++++++++++++++-------
 styles/less/ui/chat/action.less           | 74 +++++++++++++-------
 styles/less/ui/chat/downtime.less         | 19 +++++
 templates/ui/chat/ability-use.hbs         | 23 +++---
 templates/ui/chat/action.hbs              | 19 ++---
 templates/ui/chat/deathMove.hbs           |  9 +--
 templates/ui/chat/downtime.hbs            | 15 ++--
 8 files changed, 163 insertions(+), 83 deletions(-)

diff --git a/module/applications/dialogs/deathMove.mjs b/module/applications/dialogs/deathMove.mjs
index f7de27ab..ef227aa6 100644
--- a/module/applications/dialogs/deathMove.mjs
+++ b/module/applications/dialogs/deathMove.mjs
@@ -54,7 +54,7 @@ export default class DhpDeathMove extends HandlebarsApplicationMixin(Application
                 {
                     player: this.actor.name,
                     actor: { name: this.actor.name, img: this.actor.img },
-                    author: this.author,
+                    author: game.users.get(game.user.id),
                     speaker: cls.getSpeaker(),
                     title: game.i18n.localize(this.selectedMove.name),
                     img: this.selectedMove.img,
diff --git a/styles/less/ui/chat/ability-use.less b/styles/less/ui/chat/ability-use.less
index 3a192835..687579cb 100644
--- a/styles/less/ui/chat/ability-use.less
+++ b/styles/less/ui/chat/ability-use.less
@@ -15,40 +15,71 @@
             object-fit: cover;
         }
 
-        .domain-card-header {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            margin: 8px 8px 0;
-            padding-bottom: 5px;
-            width: -webkit-fill-available;
-            gap: 5px;
-            border-bottom: 1px solid @golden;
+        details[open] {
+            .fa-chevron-down {
+                transform: rotate(180deg);
+                transition: all 0.3s ease;
+            }
+        }
 
-            .title {
-                font-size: 20px;
-                color: @golden;
-                font-family: @font-subtitle;
-                margin: 0;
+        .domain-card-move {
+            width: 100%;
+
+            .fa-chevron-down {
+                transition: all 0.3s ease;
+                margin-left: auto;
             }
 
-            .tags {
+            .domain-card-header {
                 display: flex;
-                gap: 10px;
+                flex-direction: row;
+                align-items: center;
+                margin: 8px;
+                padding-bottom: 5px;
+                width: -webkit-fill-available;
+                gap: 5px;
+                border-bottom: 1px solid @golden;
 
-                .tag {
+                &:hover {
+                    background: light-dark(@dark-blue-10, @golden-10);
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                }
+
+                .domain-label {
                     display: flex;
-                    flex-direction: row;
-                    justify-content: center;
-                    align-items: center;
-                    padding: 3px 5px;
-                    font-size: 12px;
-                    font-family: @font-body;
+                    flex-direction: column;
+                    width: 100%;
+                    padding-bottom: 5px;
+                    width: -webkit-fill-available;
+                    gap: 5px;
 
-                    background: light-dark(@dark-15, @beige-15);
-                    border: 1px solid light-dark(@dark, @beige);
-                    color: light-dark(@dark, @beige);
-                    border-radius: 3px;
+                    .title {
+                        font-size: 20px;
+                        color: @golden;
+                        font-family: @font-subtitle;
+                        margin: 0;
+                    }
+
+                    .tags {
+                        display: flex;
+                        gap: 10px;
+
+                        .tag {
+                            display: flex;
+                            flex-direction: row;
+                            justify-content: center;
+                            align-items: center;
+                            padding: 3px 5px;
+                            font-size: 12px;
+                            font-family: @font-body;
+
+                            background: light-dark(@dark-15, @beige-15);
+                            border: 1px solid light-dark(@dark, @beige);
+                            color: light-dark(@dark, @beige);
+                            border-radius: 3px;
+                        }
+                    }
                 }
             }
         }
diff --git a/styles/less/ui/chat/action.less b/styles/less/ui/chat/action.less
index b20ed8a4..c3c51816 100644
--- a/styles/less/ui/chat/action.less
+++ b/styles/less/ui/chat/action.less
@@ -8,40 +8,62 @@
         flex-direction: column;
         align-items: center;
 
-        .action-section {
-            display: flex;
-            flex-direction: row;
-            width: 100%;
-            margin: 8px 8px 0;
-            padding-bottom: 5px;
-            width: -webkit-fill-available;
-            gap: 5px;
-            border-bottom: 1px solid @golden;
+        details[open] {
+            .fa-chevron-down {
+                transform: rotate(180deg);
+                transition: all 0.3s ease;
+            }
+        }
 
-            .action-img {
-                width: 40px;
-                height: 40px;
-                border-radius: 3px;
-                object-fit: cover;
+        .action-move {
+            width: 100%;
+
+            .fa-chevron-down {
+                transition: all 0.3s ease;
+                margin-left: auto;
             }
 
-            .action-header {
+            .action-section {
                 display: flex;
-                flex-direction: column;
+                flex-direction: row;
+                align-items: center;
+                margin: 8px 8px 0;
+                padding-bottom: 5px;
+                width: -webkit-fill-available;
                 gap: 5px;
+                border-bottom: 1px solid @golden;
 
-                .title {
-                    font-size: 20px;
-                    color: @golden;
-                    font-family: @font-subtitle;
-                    margin: 0;
+                &:hover {
+                    background: light-dark(@dark-blue-10, @golden-10);
+                    cursor: pointer;
+                    transition: all 0.3s ease;
                 }
 
-                .label {
-                    font-size: 12px;
-                    color: @beige;
-                    font-family: @font-body;
-                    margin: 0;
+                .action-img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 3px;
+                    object-fit: cover;
+                }
+
+                .action-header {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 5px;
+
+                    .title {
+                        font-size: 20px;
+                        color: @golden;
+                        font-family: @font-subtitle;
+                        margin: 0;
+                    }
+
+                    .label {
+                        font-size: 12px;
+                        color: @beige;
+                        font-family: @font-body;
+                        margin: 0;
+                    }
                 }
             }
         }
diff --git a/styles/less/ui/chat/downtime.less b/styles/less/ui/chat/downtime.less
index 0aa7acb1..bc702aeb 100644
--- a/styles/less/ui/chat/downtime.less
+++ b/styles/less/ui/chat/downtime.less
@@ -8,10 +8,23 @@
         flex-direction: column;
         align-items: center;
 
+        details[open] {
+            .fa-chevron-down {
+                transform: rotate(180deg);
+                transition: all 0.3s ease;
+            }
+        }
+
         .downtime-moves-list {
             display: flex;
             flex-direction: column;
             gap: 5px;
+            width: 100%;
+
+            .fa-chevron-down {
+                transition: all 0.3s ease;
+                margin-left: auto;
+            }
 
             .downtime-move {
                 width: 100%;
@@ -25,6 +38,12 @@
                     padding-bottom: 5px;
                     width: -webkit-fill-available;
 
+                    &:hover {
+                        background: light-dark(@dark-blue-10, @golden-10);
+                        cursor: pointer;
+                        transition: all 0.3s ease;
+                    }
+
                     .downtime-image {
                         width: 40px;
                         height: 40px;
diff --git a/templates/ui/chat/ability-use.hbs b/templates/ui/chat/ability-use.hbs
index 338fcd59..30c5ebb9 100644
--- a/templates/ui/chat/ability-use.hbs
+++ b/templates/ui/chat/ability-use.hbs
@@ -1,14 +1,19 @@
 <div class="daggerheart chat domain-card">
     <img class="card-img" src="{{item.img}}" />
-    <div class="domain-card-header">
-        <h2 class="title">{{item.name}}</h2>
-        <ul class="tags">
-            {{#each item.tags as |tag|}}
-                <li class="tag">{{tag}}</li>
-            {{/each}}
-        </ul>
-    </div>
-    <div class="description">{{{description}}}</div>
+    <details class="domain-card-move">
+        <summary class="domain-card-header">
+            <div class="domain-label">
+                <h2 class="title">{{item.name}}</h2>
+                <ul class="tags">
+                    {{#each item.tags as |tag|}}
+                        <li class="tag">{{tag}}</li>
+                    {{/each}}
+                </ul>
+            </div>
+            <i class="fa-solid fa-chevron-down"></i>
+        </summary>
+        <div class="description">{{{description}}}</div>
+    </details>
     <footer class="ability-card-footer">
         {{#each actions as |action index|}}
             <button class="ability-use-button" data-index="{{index}}">
diff --git a/templates/ui/chat/action.hbs b/templates/ui/chat/action.hbs
index e67590ff..6b505164 100644
--- a/templates/ui/chat/action.hbs
+++ b/templates/ui/chat/action.hbs
@@ -1,12 +1,13 @@
 <div class="daggerheart chat action">
-    <div class="action-section">
-        <img class="action-img" src="{{action.img}}" />
-        <div class="action-header">
-            <h2 class="title">{{action.name}}</h2>
-            <span class="label">{{itemOrigin.name}}</span>
-        </div>
-    </div>
-    {{#if description}}
+    <details class="action-move">
+        <summary class="action-section">
+            <img class="action-img" src="{{action.img}}" />
+            <div class="action-header">
+                <h2 class="title">{{action.name}}</h2>
+                <span class="label">{{itemOrigin.name}}</span>
+            </div>
+            <i class="fa-solid fa-chevron-down"></i>
+        </summary>
         <div class="description">{{{description}}}</div>
-    {{/if}}
+    </details>
 </div>
\ No newline at end of file
diff --git a/templates/ui/chat/deathMove.hbs b/templates/ui/chat/deathMove.hbs
index cb50fd5d..9940376e 100644
--- a/templates/ui/chat/deathMove.hbs
+++ b/templates/ui/chat/deathMove.hbs
@@ -1,16 +1,17 @@
 <div class="daggerheart chat downtime">
     <ul class="downtime-moves-list">
-        <li class="downtime-move">
-            <div class="downtime-label">
+        <details class="downtime-move">
+            <summary class="downtime-label">
                 <img class="downtime-image" src="{{this.img}}" />
                 <div class="header-label">
                     <h2 class="title">{{this.title}}</h2>
                     <span class="label">{{localize 'DAGGERHEART.UI.Chat.deathMove.title'}}</span>
                 </div>
-            </div>
+                <i class="fa-solid fa-chevron-down"></i>
+            </summary>
             <div class="description">
                 {{{this.description}}}
             </div>
-        </li>
+        </details>
     </ul>
 </div>
\ No newline at end of file
diff --git a/templates/ui/chat/downtime.hbs b/templates/ui/chat/downtime.hbs
index 9eb95ce9..6c2d2023 100644
--- a/templates/ui/chat/downtime.hbs
+++ b/templates/ui/chat/downtime.hbs
@@ -1,21 +1,22 @@
 <div class="daggerheart chat downtime">
     <ul class="downtime-moves-list">
         {{#each moves as | move index |}}
-            <li class="downtime-move">
-                <div class="downtime-label">
+            <details class="downtime-move">
+                <summary class="downtime-label">
                     <img class="downtime-image" src="{{move.img}}" />
                     <div class="header-label">
                         <h2 class="title">{{move.name}}</h2>
                         <span class="label">{{localize 'DAGGERHEART.GENERAL.Bonuses.rest.downtimeAction'}}</span>
                     </div>
-                </div>
+                     <i class="fa-solid fa-chevron-down"></i>
+                </summary>
                 <div class="description">
                     {{{move.description}}}
                 </div>
-                {{#each move.actions as | action index |}}
-                    <button class="action-use-button" data-move-index="{{@../key}}" data-action-index="{{index}}">{{localize action.name}}</button>
-                {{/each}}
-            </li>
+            </details>
+            {{#each move.actions as | action index |}}
+                <button class="action-use-button" data-move-index="{{@../key}}" data-action-index="{{index}}">{{localize action.name}}</button>
+            {{/each}}
         {{/each}}
     </ul>
 </div>
\ No newline at end of file