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>

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;

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">
+    <span class="chat__thread-title-container">
-      <div class="chat__thread-title">
+      <span class="chat__thread-title">
-        <LinkTo
+        {{#if this.site.desktopView}}
-          class="chat__thread-title__name"
+          <LinkTo
-          @route="chat.channel.thread"
+            class="chat__thread-title__name"
-          @models={{@thread.routeModels}}
+            @route="chat.channel.thread"
-        >
+            @models={{@thread.routeModels}}
-          {{this.title}}
+          >
-        </LinkTo>
+            {{this.title}}
+          </LinkTo>
+        {{else}}
+          <span class="chat__thread-title__name">
+            {{this.title}}
+          </span>
+        {{/if}}
 
-        <ThreadUnreadIndicator @thread={{@thread}} />
+      </span>
-      </div>
+      <ThreadUnreadIndicator @thread={{@thread}} />
-    </div>
+    </span>
   </template>
 }

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">
+      <span class="chat-thread-list-item-unread-indicator">
-        <div class="chat-thread-list-item-unread-indicator__number">
+        <span class="chat-thread-list-item-unread-indicator__number">
           {{this.unreadCountLabel}}
-        </div>
+        </span>
-      </div>
+      </span>
     {{/if}}
   </template>
 }

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

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">
+    <span class="c-user-thread__excerpt">
-      <div class="c-user-thread__excerpt-poster">
+      <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>
 }

plugins/chat/assets/stylesheets/common/chat-user-threads.scss

@@ -17,12 +17,19 @@
     }
   }
 
-  .chat__thread-title__name {
+  .chat__thread-title {
-    font-size: var(--font-up-1-rem);
+    &-container {
-    word-break: break-all;
+      display: flex;
+      gap: 1rem;
+    }
 
-    &:hover {
+    &__name {
-      color: var(--primary-very-high);
+      font-size: var(--font-up-1-rem);
+      word-break: break-all;
+
+      &:hover {
+        color: var(--primary-very-high);
+      }
     }
   }
 

plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss

@@ -1,11 +1,6 @@
 .c-user-thread {
-  display: grid;
+  display: flex;
-  grid-template-areas:
+  gap: 1rem;
-    "avatar category timestamp"
-    "avatar title indicator"
-    "avatar excerpt excerpt";
-  grid-template-columns: auto 1fr auto;
-  grid-column-gap: 0.75em;
   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;
       }