make the messages header clickable to collapse emails

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/components/messages.css

@@ -410,6 +410,20 @@ summary.attachment-info {
 .message-branch-4 .message-header { border-left-color: #ef4444; }
 .message-branch-5 .message-header { border-left-color: #0ea5e9; }
 
+/* Clickable header for collapse */
+.message-header {
+  cursor: pointer;
+}
+
+.message-header a,
+.message-header button {
+  cursor: default;
+}
+
+.message-header a {
+  cursor: pointer;
+}
+
 /* Collapse toggle */
 .message-collapse-toggle {
   border: none;

app/javascript/controllers/message_collapse_controller.js

@@ -15,6 +15,11 @@ export default class extends Controller {
     this.collapsedValue = !this.collapsedValue
   }
 
+  headerClick(event) {
+    if (event.target.closest("a, button")) return
+    this.toggle()
+  }
+
   applyState() {
     this.element.classList.toggle("is-collapsed", this.collapsedValue)
     const icon = this.element.querySelector(".message-collapse-toggle i")

app/views/topics/_message.html.slim

@@ -9,7 +9,7 @@
   - if local_assigns[:is_first_unread]
     a.message-id-anchor id="first-unread" aria-hidden="true"
   - display_number = number || (@message_numbers && @message_numbers[message.id])
-  .message-header
+  .message-header data-action="click->message-collapse#headerClick"
     .message-author
       .author-row
         = link_to "##{display_number}", "#message-#{message.id}", class: "message-number"