UX: allow users to click thread title to open it (#24816)

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">

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>

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>

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;
   }

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