From 4404b6808c6bfee5023afd368d48f86b7bc21d15 Mon Sep 17 00:00:00 2001
From: David Battersby <info@davidbattersby.com>
Date: Thu, 9 May 2024 12:45:02 +0400
Subject: [PATCH] UX: expand threads list tap area on mobile (#26818)

This change adds a wrapper link around the thread list details on mobile to make the click area larger.

We also update child div elements to span to ensure valid html, since the link is an inline element and divs are block level.

---------

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
---
 .../components/channel-title/index.gjs        |  4 +--
 .../components/thread-title/index.gjs         | 33 ++++++++++++-------
 .../thread-unread-indicator/index.gjs         |  8 ++---
 .../components/user-threads/index.gjs         | 18 +++++++---
 .../components/user-threads/preview.gjs       |  8 ++---
 .../stylesheets/common/chat-user-threads.scss | 17 +++++++---
 .../stylesheets/mobile/chat-user-threads.scss | 24 +++++++++-----
 7 files changed, 73 insertions(+), 39 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/channel-title/index.gjs b/plugins/chat/assets/javascripts/discourse/components/channel-title/index.gjs
index c2339d7f052..2ae556abff1 100644
--- a/plugins/chat/assets/javascripts/discourse/components/channel-title/index.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/channel-title/index.gjs
@@ -3,7 +3,7 @@ import ChannelIcon from "discourse/plugins/chat/discourse/components/channel-ico
 import ChannelName from "discourse/plugins/chat/discourse/components/channel-name";
 
 const ChatChannelTitle = <template>
-  <div
+  <span
     class={{concatClass
       "chat-channel-title"
       (if @channel.isDirectMessageChannel "is-dm" "is-category")
@@ -15,7 +15,7 @@ const ChatChannelTitle = <template>
     {{#if (has-block)}}
       {{yield}}
     {{/if}}
-  </div>
+  </span>
 </template>;
 
 export default ChatChannelTitle;
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 7b9213ce4de..0cd1f72ee77 100644
--- a/plugins/chat/assets/javascripts/discourse/components/thread-title/index.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/thread-title/index.gjs
@@ -1,11 +1,14 @@
 import Component from "@glimmer/component";
 import { LinkTo } from "@ember/routing";
+import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import replaceEmoji from "discourse/helpers/replace-emoji";
 import { escapeExpression } from "discourse/lib/utilities";
 import ThreadUnreadIndicator from "discourse/plugins/chat/discourse/components/thread-unread-indicator";
 
 export default class ChatThreadTitle extends Component {
+  @service site;
+
   get title() {
     if (this.args.thread.title) {
       return replaceEmoji(htmlSafe(escapeExpression(this.args.thread.title)));
@@ -15,18 +18,24 @@ export default class ChatThreadTitle extends Component {
   }
 
   <template>
-    <div class="chat__thread-title-container">
-      <div class="chat__thread-title">
-        <LinkTo
-          class="chat__thread-title__name"
-          @route="chat.channel.thread"
-          @models={{@thread.routeModels}}
-        >
-          {{this.title}}
-        </LinkTo>
+    <span class="chat__thread-title-container">
+      <span class="chat__thread-title">
+        {{#if this.site.desktopView}}
+          <LinkTo
+            class="chat__thread-title__name"
+            @route="chat.channel.thread"
+            @models={{@thread.routeModels}}
+          >
+            {{this.title}}
+          </LinkTo>
+        {{else}}
+          <span class="chat__thread-title__name">
+            {{this.title}}
+          </span>
+        {{/if}}
 
-        <ThreadUnreadIndicator @thread={{@thread}} />
-      </div>
-    </div>
+      </span>
+      <ThreadUnreadIndicator @thread={{@thread}} />
+    </span>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/thread-unread-indicator/index.gjs b/plugins/chat/assets/javascripts/discourse/components/thread-unread-indicator/index.gjs
index 6fe990964f3..cacd5be8e29 100644
--- a/plugins/chat/assets/javascripts/discourse/components/thread-unread-indicator/index.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/thread-unread-indicator/index.gjs
@@ -15,11 +15,11 @@ export default class ChatThreadUnreadIndicator extends Component {
 
   <template>
     {{#if this.showUnreadIndicator}}
-      <div class="chat-thread-list-item-unread-indicator">
-        <div class="chat-thread-list-item-unread-indicator__number">
+      <span class="chat-thread-list-item-unread-indicator">
+        <span class="chat-thread-list-item-unread-indicator__number">
           {{this.unreadCountLabel}}
-        </div>
-      </div>
+        </span>
+      </span>
     {{/if}}
   </template>
 }
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 e311e2f4923..cc9ac806442 100644
--- a/plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs
@@ -1,5 +1,6 @@
 import Component from "@glimmer/component";
 import { cached } from "@glimmer/tracking";
+import { LinkTo } from "@ember/routing";
 import { service } from "@ember/service";
 import i18n from "discourse-common/helpers/i18n";
 import { bind } from "discourse-common/utils/decorators";
@@ -97,12 +98,21 @@ export default class UserThreads extends Component {
             <ChannelIcon @thread={{thread}} />
           {{/if}}
 
-          <ChannelTitle @channel={{thread.channel}} />
-          <ThreadTitle @thread={{thread}} />
-
           {{#if this.site.mobileView}}
-            <ThreadPreview @preview={{thread.preview}} />
+            <LinkTo
+              class="c-user-thread__link"
+              @route="chat.channel.thread"
+              @models={{thread.routeModels}}
+            >
+              <ChannelTitle @channel={{thread.channel}} />
+              <ThreadTitle @thread={{thread}} />
+
+              <ThreadPreview @preview={{thread.preview}} />
+            </LinkTo>
           {{else}}
+            <ChannelTitle @channel={{thread.channel}} />
+            <ThreadTitle @thread={{thread}} />
+
             <ThreadIndicator
               @message={{thread.originalMessage}}
               @interactiveUser={{false}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/user-threads/preview.gjs b/plugins/chat/assets/javascripts/discourse/components/user-threads/preview.gjs
index 842de10ef19..6b1fc8452f9 100644
--- a/plugins/chat/assets/javascripts/discourse/components/user-threads/preview.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/user-threads/preview.gjs
@@ -10,14 +10,14 @@ export default class ThreadPreview extends Component {
     <span class="chat-message-thread-indicator__last-reply-timestamp">
       {{this.lastReplyDate}}
     </span>
-    <div class="c-user-thread__excerpt">
-      <div class="c-user-thread__excerpt-poster">
+    <span class="c-user-thread__excerpt">
+      <span class="c-user-thread__excerpt-poster">
         {{@preview.lastReplyUser.username}}
-      </div>
+      </span>
       <span>:</span>
       <span class="c-user-thread__excerpt-text">
         {{@preview.lastReplyExcerpt}}
       </span>
-    </div>
+    </span>
   </template>
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-user-threads.scss b/plugins/chat/assets/stylesheets/common/chat-user-threads.scss
index 86061be7f54..1c81d6ac2cf 100644
--- a/plugins/chat/assets/stylesheets/common/chat-user-threads.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-user-threads.scss
@@ -17,12 +17,19 @@
     }
   }
 
-  .chat__thread-title__name {
-    font-size: var(--font-up-1-rem);
-    word-break: break-all;
+  .chat__thread-title {
+    &-container {
+      display: flex;
+      gap: 1rem;
+    }
 
-    &:hover {
-      color: var(--primary-very-high);
+    &__name {
+      font-size: var(--font-up-1-rem);
+      word-break: break-all;
+
+      &:hover {
+        color: var(--primary-very-high);
+      }
     }
   }
 
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss b/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss
index 7532804052a..03e9d1a8638 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss
@@ -1,11 +1,6 @@
 .c-user-thread {
-  display: grid;
-  grid-template-areas:
-    "avatar category timestamp"
-    "avatar title indicator"
-    "avatar excerpt excerpt";
-  grid-template-columns: auto 1fr auto;
-  grid-column-gap: 0.75em;
+  display: flex;
+  gap: 1rem;
   margin-inline: 0;
   padding: 0.5rem 1.5rem;
 
@@ -20,6 +15,18 @@
     }
   }
 
+  .c-user-thread__link {
+    display: grid;
+    grid-column-gap: 0.75em;
+    grid-template-columns: 1fr auto;
+    margin-inline: 0;
+    width: 100%;
+    grid-template-areas:
+      "category timestamp"
+      "title title"
+      "excerpt excerpt";
+  }
+
   .avatar-flair.--threads {
     position: absolute;
     top: -4px;
@@ -33,9 +40,10 @@
   }
 
   .chat__thread-title-container {
-    @include ellipsis;
+    display: flex;
     grid-area: title;
     .chat__thread-title {
+      @include ellipsis;
       &__name {
         @include ellipsis;
       }