From 54724f7c09ccfe834fc93ee3f1edcb7d500e650d Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 11 Dec 2023 13:54:00 +0100
Subject: [PATCH] UX: allow users to click thread title to open it (#24816)

---
 .../chat-message-thread-indicator.gjs         | 34 ++++++++++++-------
 .../components/thread-title/index.gjs         |  9 +++--
 .../components/user-threads/index.gjs         |  1 +
 .../stylesheets/common/chat-thread-title.scss |  5 +++
 .../system/page_objects/chat/user_threads.rb  |  4 ++-
 5 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.gjs
index 9bc21b16a93..fa5c6bb0f54 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.gjs
@@ -27,6 +27,10 @@ export default class ChatMessageThreadIndicator extends Component {
     return this.args.interactiveUser ?? true;
   }
 
+  get interactiveThread() {
+    return this.args.interactiveThread ?? true;
+  }
+
   @action
   setup(element) {
     this.element = element;
@@ -42,13 +46,15 @@ export default class ChatMessageThreadIndicator extends Component {
       this.element.addEventListener("touchCancel", this.cancelTouch);
     }
 
-    this.element.addEventListener("mousedown", this.openThread, {
-      passive: true,
-    });
+    if (this.interactiveThread) {
+      this.element.addEventListener("mousedown", this.openThread, {
+        passive: true,
+      });
 
-    this.element.addEventListener("keydown", this.openThread, {
-      passive: true,
-    });
+      this.element.addEventListener("keydown", this.openThread, {
+        passive: true,
+      });
+    }
   }
 
   @action
@@ -64,13 +70,15 @@ export default class ChatMessageThreadIndicator extends Component {
       this.element.removeEventListener("touchCancel", this.cancelTouch);
     }
 
-    this.element.removeEventListener("mousedown", this.openThread, {
-      passive: true,
-    });
+    if (this.interactiveThread) {
+      this.element.removeEventListener("mousedown", this.openThread, {
+        passive: true,
+      });
 
-    this.element.removeEventListener("keydown", this.openThread, {
-      passive: true,
-    });
+      this.element.removeEventListener("keydown", this.openThread, {
+        passive: true,
+      });
+    }
   }
 
   @bind
@@ -134,7 +142,7 @@ export default class ChatMessageThreadIndicator extends Component {
       {{willDestroy this.teardown}}
       role="button"
       title={{i18n "chat.threads.open"}}
-      tabindex="0"
+      tabindex={{if this.interactiveThread "0" "-1"}}
     >
 
       <div class="chat-message-thread-indicator__last-reply-avatar">
diff --git a/plugins/chat/assets/javascripts/discourse/components/thread-title/index.gjs b/plugins/chat/assets/javascripts/discourse/components/thread-title/index.gjs
index 9b823415a34..7b9213ce4de 100644
--- a/plugins/chat/assets/javascripts/discourse/components/thread-title/index.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/thread-title/index.gjs
@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import { LinkTo } from "@ember/routing";
 import { htmlSafe } from "@ember/template";
 import replaceEmoji from "discourse/helpers/replace-emoji";
 import { escapeExpression } from "discourse/lib/utilities";
@@ -16,9 +17,13 @@ export default class ChatThreadTitle extends Component {
   <template>
     <div class="chat__thread-title-container">
       <div class="chat__thread-title">
-        <span class="chat__thread-title__name">
+        <LinkTo
+          class="chat__thread-title__name"
+          @route="chat.channel.thread"
+          @models={{@thread.routeModels}}
+        >
           {{this.title}}
-        </span>
+        </LinkTo>
 
         <ThreadUnreadIndicator @thread={{@thread}} />
       </div>
diff --git a/plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs b/plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs
index baca79be4e6..64277b6cf44 100644
--- a/plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs
@@ -88,6 +88,7 @@ export default class UserThreads extends Component {
                 <ThreadIndicator
                   @message={{thread.originalMessage}}
                   @interactiveUser={{false}}
+                  @interactiveThread={{false}}
                 />
               </div>
             </div>
diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-title.scss b/plugins/chat/assets/stylesheets/common/chat-thread-title.scss
index e229d0f6dd5..48e04b63960 100644
--- a/plugins/chat/assets/stylesheets/common/chat-thread-title.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-thread-title.scss
@@ -1,6 +1,11 @@
 .chat__thread-title {
   display: flex;
 
+  &__name,
+  &__name:visited {
+    color: var(--primary);
+  }
+
   .chat-thread-list-item-unread-indicator {
     margin-left: 0.5rem;
   }
diff --git a/plugins/chat/spec/system/page_objects/chat/user_threads.rb b/plugins/chat/spec/system/page_objects/chat/user_threads.rb
index 4e837f23cfa..c98dbc7e325 100644
--- a/plugins/chat/spec/system/page_objects/chat/user_threads.rb
+++ b/plugins/chat/spec/system/page_objects/chat/user_threads.rb
@@ -9,7 +9,9 @@ module PageObjects
       end
 
       def open_thread(thread)
-        find(".chat__user-threads__thread-container[data-id='#{thread.id}']").click
+        find(
+          ".chat__user-threads__thread-container[data-id='#{thread.id}'] .chat__thread-title__name",
+        ).click
       end
     end
   end