add colapsable descriptions in chat messages

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,

styles/less/ui/chat/ability-use.less

@@ -15,16 +15,45 @@
             object-fit: cover;
         }
 
+        details[open] {
+            .fa-chevron-down {
+                transform: rotate(180deg);
+                transition: all 0.3s ease;
+            }
+        }
+
+        .domain-card-move {
+            width: 100%;
+
+            .fa-chevron-down {
+                transition: all 0.3s ease;
+                margin-left: auto;
+            }
+
             .domain-card-header {
                 display: flex;
-            flex-direction: column;
+                flex-direction: row;
-            width: 100%;
+                align-items: center;
-            margin: 8px 8px 0;
+                margin: 8px;
                 padding-bottom: 5px;
                 width: -webkit-fill-available;
                 gap: 5px;
                 border-bottom: 1px solid @golden;
 
+                &:hover {
+                    background: light-dark(@dark-blue-10, @golden-10);
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                }
+
+                .domain-label {
+                    display: flex;
+                    flex-direction: column;
+                    width: 100%;
+                    padding-bottom: 5px;
+                    width: -webkit-fill-available;
+                    gap: 5px;
+
                     .title {
                         font-size: 20px;
                         color: @golden;
@@ -52,6 +81,8 @@
                         }
                     }
                 }
+            }
+        }
 
         .description {
             color: @beige;

styles/less/ui/chat/action.less

@@ -8,16 +8,37 @@
         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;
-            width: 100%;
+                align-items: center;
                 margin: 8px 8px 0;
                 padding-bottom: 5px;
                 width: -webkit-fill-available;
                 gap: 5px;
                 border-bottom: 1px solid @golden;
 
+                &:hover {
+                    background: light-dark(@dark-blue-10, @golden-10);
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                }
+
                 .action-img {
                     width: 40px;
                     height: 40px;
@@ -45,6 +66,7 @@
                     }
                 }
             }
+        }
 
         .description {
             color: @beige;

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;

templates/ui/chat/ability-use.hbs

@@ -1,6 +1,8 @@
 <div class="daggerheart chat domain-card">
     <img class="card-img" src="{{item.img}}" />
-    <div class="domain-card-header">
+    <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|}}
@@ -8,7 +10,10 @@
                     {{/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}}">

templates/ui/chat/action.hbs

@@ -1,12 +1,13 @@
 <div class="daggerheart chat action">
-    <div class="action-section">
+    <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>
-    </div>
+            <i class="fa-solid fa-chevron-down"></i>
-    {{#if description}}
+        </summary>
         <div class="description">{{{description}}}</div>
-    {{/if}}
+    </details>
 </div>

templates/ui/chat/deathMove.hbs

@@ -1,16 +1,17 @@
 <div class="daggerheart chat downtime">
     <ul class="downtime-moves-list">
-        <li class="downtime-move">
+        <details class="downtime-move">
-            <div class="downtime-label">
+            <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>

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">
+            <details class="downtime-move">
-                <div class="downtime-label">
+                <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>
+            </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}}
-            </li>
         {{/each}}
     </ul>
 </div>