From 7b173e883f0a573dfe5b27e5b8824de8ce6bb898 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 25 Jan 2024 15:30:21 +0100
Subject: [PATCH] FEATURE: display last message on mobile (#25384)

Direct messages on mobile will now display the last message in the channels list.
---
 .../components/channel-icon/index.gjs         |  49 +++++++
 .../components/channel-name/index.gjs         |  79 +++++++++++
 .../components/channel-title/index.gjs        | 126 +++--------------
 .../components/chat-channel-metadata.gjs      |   4 +-
 .../discourse/components/chat-channel-row.gjs |  28 +++-
 .../stylesheets/common/chat-channel-icon.scss |  56 ++++++++
 .../stylesheets/common/chat-channel-name.scss |  18 +++
 .../stylesheets/common/chat-channel-row.scss  | 129 ++++++++----------
 .../common/chat-channel-title.scss            |  35 +----
 .../chat/assets/stylesheets/common/index.scss |   2 +
 .../stylesheets/mobile/chat-channel-row.scss  |  62 +++++++--
 .../spec/system/channel_settings_page_spec.rb |   2 +-
 .../spec/system/list_channels/mobile_spec.rb  |  29 ++++
 .../components/channel-icon-test.gjs          |  81 +++++++++++
 .../components/channel-name-test.gjs          |  63 +++++++++
 .../components/channel-title-test.gjs         |  25 ++++
 .../components/channel-title-test.js          |  95 -------------
 .../components/chat-channel-metadata-test.js  |   4 +-
 .../chat-channel-preview-card-test.js         |   4 +-
 .../components/chat-channel-row-test.js       |   6 +-
 20 files changed, 568 insertions(+), 329 deletions(-)
 create mode 100644 plugins/chat/assets/javascripts/discourse/components/channel-icon/index.gjs
 create mode 100644 plugins/chat/assets/javascripts/discourse/components/channel-name/index.gjs
 create mode 100644 plugins/chat/assets/stylesheets/common/chat-channel-icon.scss
 create mode 100644 plugins/chat/assets/stylesheets/common/chat-channel-name.scss
 create mode 100644 plugins/chat/test/javascripts/components/channel-icon-test.gjs
 create mode 100644 plugins/chat/test/javascripts/components/channel-name-test.gjs
 create mode 100644 plugins/chat/test/javascripts/components/channel-title-test.gjs
 delete mode 100644 plugins/chat/test/javascripts/components/channel-title-test.js

diff --git a/plugins/chat/assets/javascripts/discourse/components/channel-icon/index.gjs b/plugins/chat/assets/javascripts/discourse/components/channel-icon/index.gjs
new file mode 100644
index 00000000000..a014679d985
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/channel-icon/index.gjs
@@ -0,0 +1,49 @@
+import Component from "@glimmer/component";
+import { htmlSafe } from "@ember/template";
+import icon from "discourse-common/helpers/d-icon";
+import ChatUserAvatar from "discourse/plugins/chat/discourse/components/chat-user-avatar";
+
+export default class ChatChannelIcon extends Component {
+  get firstUser() {
+    return this.args.channel.chatable.users[0];
+  }
+
+  get groupDirectMessage() {
+    return (
+      this.args.channel.isDirectMessageChannel &&
+      this.args.channel.chatable.group
+    );
+  }
+
+  get channelColorStyle() {
+    return htmlSafe(`color: #${this.args.channel.chatable.color}`);
+  }
+
+  <template>
+    {{#if @channel.isDirectMessageChannel}}
+      <div class="chat-channel-icon">
+        {{#if this.groupDirectMessage}}
+          <span class="chat-channel-icon --users-count">
+            {{@channel.membershipsCount}}
+          </span>
+        {{else}}
+          <div class="chat-channel-icon --avatar">
+            <ChatUserAvatar @user={{this.firstUser}} @interactive={{false}} />
+          </div>
+        {{/if}}
+      </div>
+    {{else if @channel.isCategoryChannel}}
+      <div class="chat-channel-icon">
+        <span
+          class="chat-channel-icon --category-badge"
+          style={{this.channelColorStyle}}
+        >
+          {{icon "d-chat"}}
+          {{#if @channel.chatable.read_restricted}}
+            {{icon "lock" class="chat-channel-icon__restricted-category-icon"}}
+          {{/if}}
+        </span>
+      </div>
+    {{/if}}
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/channel-name/index.gjs b/plugins/chat/assets/javascripts/discourse/components/channel-name/index.gjs
new file mode 100644
index 00000000000..6aeb8aa933f
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/channel-name/index.gjs
@@ -0,0 +1,79 @@
+import Component from "@glimmer/component";
+import { get, hash } from "@ember/helper";
+import { inject as service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import PluginOutlet from "discourse/components/plugin-outlet";
+import UserStatusMessage from "discourse/components/user-status-message";
+import replaceEmoji from "discourse/helpers/replace-emoji";
+
+export default class ChatChannelName extends Component {
+  @service currentUser;
+
+  get firstUser() {
+    return this.args.channel.chatable.users[0];
+  }
+
+  get users() {
+    return this.args.channel.chatable.users;
+  }
+
+  get groupDirectMessage() {
+    return (
+      this.args.channel.isDirectMessageChannel &&
+      this.args.channel.chatable.group
+    );
+  }
+
+  get groupsDirectMessageTitle() {
+    return this.args.channel.title || this.usernames;
+  }
+
+  get usernames() {
+    return this.users.mapBy("username").join(", ");
+  }
+
+  get channelColorStyle() {
+    return htmlSafe(`color: #${this.args.channel.chatable.color}`);
+  }
+
+  get showUserStatus() {
+    return !!(this.users.length === 1 && this.users[0].status);
+  }
+
+  <template>
+    <div class="chat-channel-name">
+      {{#if @channel.isDirectMessageChannel}}
+        {{#if this.groupDirectMessage}}
+          <span class="chat-channel-name__label">
+            {{this.groupsDirectMessageTitle}}
+          </span>
+        {{else}}
+          <span class="chat-channel-name__label">
+            {{this.firstUser.username}}
+          </span>
+          {{#if this.showUserStatus}}
+            <UserStatusMessage
+              @status={{get this.users "0.status"}}
+              @showDescription={{if this.site.mobileView "true"}}
+              class="chat-channel__user-status-message"
+            />
+          {{/if}}
+          <PluginOutlet
+            @name="after-chat-channel-username"
+            @outletArgs={{hash user=@user}}
+            @tagName=""
+            @connectorTagName=""
+          />
+        {{/if}}
+      {{else if @channel.isCategoryChannel}}
+        <span class="chat-channel-name__label">
+          {{replaceEmoji @channel.title}}
+        </span>
+
+        {{#if (has-block)}}
+          {{yield}}
+        {{/if}}
+      {{/if}}
+    </div>
+  </template>
+}
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 65b36f386c7..c2339d7f052 100644
--- a/plugins/chat/assets/javascripts/discourse/components/channel-title/index.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/channel-title/index.gjs
@@ -1,111 +1,21 @@
-import Component from "@glimmer/component";
-import { get, hash } from "@ember/helper";
-import { inject as service } from "@ember/service";
-import { htmlSafe } from "@ember/template";
-import PluginOutlet from "discourse/components/plugin-outlet";
-import UserStatusMessage from "discourse/components/user-status-message";
-import replaceEmoji from "discourse/helpers/replace-emoji";
-import icon from "discourse-common/helpers/d-icon";
-import ChatUserAvatar from "discourse/plugins/chat/discourse/components/chat-user-avatar";
+import concatClass from "discourse/helpers/concat-class";
+import ChannelIcon from "discourse/plugins/chat/discourse/components/channel-icon";
+import ChannelName from "discourse/plugins/chat/discourse/components/channel-name";
 
-export default class ChatChannelTitle extends Component {
-  @service currentUser;
+const ChatChannelTitle = <template>
+  <div
+    class={{concatClass
+      "chat-channel-title"
+      (if @channel.isDirectMessageChannel "is-dm" "is-category")
+    }}
+  >
+    <ChannelIcon @channel={{@channel}} />
+    <ChannelName @channel={{@channel}} />
 
-  get firstUser() {
-    return this.args.channel.chatable.users[0];
-  }
-
-  get users() {
-    return this.args.channel.chatable.users;
-  }
-
-  get groupDirectMessage() {
-    return (
-      this.args.channel.isDirectMessageChannel &&
-      this.args.channel.chatable.group
-    );
-  }
-
-  get groupsDirectMessageTitle() {
-    return this.args.channel.title || this.usernames;
-  }
-
-  get usernames() {
-    return this.users.mapBy("username").join(", ");
-  }
-
-  get channelColorStyle() {
-    return htmlSafe(`color: #${this.args.channel.chatable.color}`);
-  }
-
-  get showUserStatus() {
-    return !!(this.users.length === 1 && this.users[0].status);
-  }
-
-  <template>
-    {{#if @channel.isDirectMessageChannel}}
-      <div class="chat-channel-title is-dm">
-        {{#if this.groupDirectMessage}}
-          <span class="chat-channel-title__users-count">
-            {{@channel.membershipsCount}}
-          </span>
-        {{else}}
-          <div class="chat-channel-title__avatar">
-            <ChatUserAvatar @user={{this.firstUser}} @interactive={{false}} />
-          </div>
-        {{/if}}
-
-        <div class="chat-channel-title__user-info">
-          <div class="chat-channel-title__usernames">
-            {{#if this.groupDirectMessage}}
-              <span class="chat-channel-title__name">
-                {{this.groupsDirectMessageTitle}}
-              </span>
-            {{else}}
-              <span class="chat-channel-title__name">
-                {{this.firstUser.username}}
-              </span>
-              {{#if this.showUserStatus}}
-                <UserStatusMessage
-                  @status={{get this.users "0.status"}}
-                  @showDescription={{if this.site.mobileView "true"}}
-                  class="chat-channel-title__user-status-message"
-                />
-              {{/if}}
-              <PluginOutlet
-                @name="after-chat-channel-username"
-                @outletArgs={{hash user=@user}}
-                @tagName=""
-                @connectorTagName=""
-              />
-            {{/if}}
-
-          </div>
-        </div>
-
-        {{#if (has-block)}}
-          {{yield}}
-        {{/if}}
-      </div>
-    {{else if @channel.isCategoryChannel}}
-      <div class="chat-channel-title is-category">
-        <span
-          class="chat-channel-title__category-badge"
-          style={{this.channelColorStyle}}
-        >
-          {{icon "d-chat"}}
-          {{#if @channel.chatable.read_restricted}}
-            {{icon "lock" class="chat-channel-title__restricted-category-icon"}}
-          {{/if}}
-        </span>
-        <span class="chat-channel-title__name">
-          {{replaceEmoji @channel.title}}
-        </span>
-
-        {{#if (has-block)}}
-          {{yield}}
-        {{/if}}
-      </div>
+    {{#if (has-block)}}
+      {{yield}}
     {{/if}}
-  </template>
-}
+  </div>
+</template>;
+
+export default ChatChannelTitle;
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-metadata.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-channel-metadata.gjs
index 7fd591fbe5f..b00f21c38dd 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-metadata.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-metadata.gjs
@@ -18,9 +18,9 @@ export default class ChatChannelMetadata extends Component {
   }
 
   <template>
-    <div class="chat-channel-metadata">
+    <div class="chat-channel__metadata">
       {{#if @channel.lastMessage}}
-        <div class="chat-channel-metadata__date">
+        <div class="chat-channel__metadata-date">
           {{this.lastMessageFormattedDate}}
         </div>
       {{/if}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-row.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-channel-row.gjs
index a95b186d82b..8e77a5f8d61 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-row.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-row.gjs
@@ -9,13 +9,15 @@ import { inject as service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { modifier } from "ember-modifier";
 import concatClass from "discourse/helpers/concat-class";
+import replaceEmoji from "discourse/helpers/replace-emoji";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import icon from "discourse-common/helpers/d-icon";
 import { bind } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import and from "truth-helpers/helpers/and";
 import eq from "truth-helpers/helpers/eq";
-import ChannelTitle from "discourse/plugins/chat/discourse/components/channel-title";
+import ChannelIcon from "discourse/plugins/chat/discourse/components/channel-icon";
+import ChannelName from "discourse/plugins/chat/discourse/components/channel-name";
 import ChatChannelMetadata from "discourse/plugins/chat/discourse/components/chat-channel-metadata";
 import ToggleChannelMembershipButton from "discourse/plugins/chat/discourse/components/toggle-channel-membership-button";
 
@@ -142,6 +144,14 @@ export default class ChatChannelRow extends Component {
     return this.args.channel.tracking.unreadCount > 0;
   }
 
+  get shouldRenderLastMessage() {
+    return (
+      this.site.mobileView &&
+      this.args.channel.isDirectMessageChannel &&
+      this.args.channel.lastMessage
+    );
+  }
+
   get #firstDirectMessageUser() {
     return this.args.channel?.chatable?.users?.firstObject;
   }
@@ -177,6 +187,7 @@ export default class ChatChannelRow extends Component {
       <div
         class={{concatClass
           "chat-channel-row__content"
+          (if @channel.isCategoryChannel "is-category" "is-dm")
           (if this.shouldReset "-animate-reset")
         }}
         {{(if this.shouldHandleSwipe (modifier this.registerSwipableRow))}}
@@ -184,8 +195,19 @@ export default class ChatChannelRow extends Component {
         {{(if this.shouldReset (modifier this.onReset))}}
         style={{this.rowStyle}}
       >
-        <ChannelTitle @channel={{@channel}} />
-        <ChatChannelMetadata @channel={{@channel}} @unreadIndicator={{true}} />
+        <ChannelIcon @channel={{@channel}} />
+        <div class="chat-channel-row__info">
+          <ChannelName @channel={{@channel}} />
+          <ChatChannelMetadata
+            @channel={{@channel}}
+            @unreadIndicator={{true}}
+          />
+          {{#if this.shouldRenderLastMessage}}
+            <div class="chat-channel__last-message">
+              {{replaceEmoji (htmlSafe @channel.lastMessage.excerpt)}}
+            </div>
+          {{/if}}
+        </div>
 
         {{#if
           (and @options.leaveButton @channel.isFollowing this.site.desktopView)
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-icon.scss b/plugins/chat/assets/stylesheets/common/chat-channel-icon.scss
new file mode 100644
index 00000000000..08029806fb4
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-icon.scss
@@ -0,0 +1,56 @@
+.chat-channel-icon {
+  flex-shrink: 0;
+  &.--users-count {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: rgba(var(--primary-rgb), 0.1);
+    box-sizing: border-box;
+    color: var(--primary-high);
+    padding: 0;
+
+    .chat-channel-row & {
+      width: var(--channel-list-avatar-size);
+      height: var(--channel-list-avatar-size);
+      font-size: var(--font-up-1);
+    }
+  }
+
+  &.--avatar {
+    .chat-user-avatar {
+      .avatar {
+        .chat-channel-row & {
+          width: var(--channel-list-avatar-size);
+          height: var(--channel-list-avatar-size);
+        }
+      }
+    }
+  }
+
+  &.--category-badge {
+    color: var(--primary-medium);
+    display: flex;
+    font-size: var(--font-up-1);
+    position: relative;
+
+    .chat-message-creator & {
+      justify-content: center;
+      width: 24px;
+    }
+  }
+
+  &__restricted-category-icon {
+    background-color: var(--secondary);
+    position: absolute;
+    border-radius: 50%;
+    padding: 2px 2px 3px;
+    color: var(--primary-high);
+    height: 0.5rem;
+    width: 0.5rem;
+    right: -0.5rem;
+    top: -0.1rem;
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-name.scss b/plugins/chat/assets/stylesheets/common/chat-channel-name.scss
new file mode 100644
index 00000000000..dd39c80c9b4
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-name.scss
@@ -0,0 +1,18 @@
+.chat-channel-name {
+  @include ellipsis;
+  color: var(--primary);
+
+  .has-unread & {
+    font-weight: bold;
+  }
+
+  &__label {
+    white-space: nowrap;
+  }
+
+  .emoji {
+    height: 1.2em;
+    vertical-align: text-bottom;
+    width: 1.2em;
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-row.scss b/plugins/chat/assets/stylesheets/common/chat-channel-row.scss
index 357118f1ac7..37a81e7bc5b 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-row.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-row.scss
@@ -5,15 +5,7 @@
   justify-content: space-between;
   position: relative;
   cursor: pointer;
-  color: var(--primary-high);
-
-  &__content {
-    display: flex;
-    justify-content: space-between;
-    max-width: 100%;
-    align-items: center;
-    flex-grow: 1;
-  }
+  color: var(--primary);
 
   @media (hover: none) {
     &:hover,
@@ -41,7 +33,7 @@
         }
       }
 
-      .chat-channel-metadata {
+      .chat-channel__metadata {
         display: none;
       }
     }
@@ -49,55 +41,79 @@
 
   &:hover,
   &.active {
-    .chat-channel-title {
-      &,
-      .category-chat-name,
-      .dm-usernames {
-        color: var(--primary);
-      }
+    .chat-channel-name {
+      color: var(--primary);
+    }
 
-      .d-icon-lock {
-        background-color: var(--primary-low);
-      }
+    .d-icon-lock {
+      background-color: var(--primary-low);
     }
   }
 
   &:visited {
-    color: var(--primary-high);
+    color: var(--primary);
   }
 
   &.muted {
     opacity: 0.65;
   }
 
-  .chat-channel-title {
+  &__content {
+    display: flex;
+    max-width: 100%;
+    align-items: center;
+    flex-grow: 1;
+    gap: 0.75rem;
     overflow: hidden;
+  }
 
-    &__users-count {
-      width: var(--channel-list-avatar-size);
-      height: var(--channel-list-avatar-size);
-      padding: 0;
-      font-size: var(--font-up-1);
-      justify-content: center;
-      flex-shrink: 0;
+  &__info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  .chat-channel {
+    &__user-info,
+    &__channel-info {
+      white-space: nowrap;
+      overflow: hidden;
+      @include ellipsis;
+      display: flex;
+      align-items: center;
     }
 
-    &__avatar {
-      .chat-user-avatar {
-        img {
-          width: calc(var(--channel-list-avatar-size) - 2px);
-          height: calc(var(--channel-list-avatar-size) - 2px);
+    &__metadata {
+      display: flex;
+      align-items: flex-end;
+      flex-direction: column;
+      margin-left: 0.5em;
+
+      .chat-channel-unread-indicator {
+        @include chat-unread-indicator;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 8px;
+        height: 8px;
+
+        &.-urgent {
+          width: auto;
+          height: auto;
+          min-width: 0.6em;
+          padding: 0.3em 0.5em;
         }
       }
     }
-    &__user-info {
-      @include ellipsis;
-    }
-    &__usernames {
-      display: flex;
-      align-items: center;
-      justify-content: start;
+
+    &__metadata-date {
+      color: var(--primary-high);
+      font-size: var(--font-down-2);
+      white-space: nowrap;
     }
+
     .user-status-message {
       display: inline-block;
       font-size: var(--font-down-2);
@@ -109,35 +125,6 @@
     }
   }
 
-  .chat-channel-metadata {
-    display: flex;
-    align-items: flex-end;
-    flex-direction: column;
-    margin-left: 0.5em;
-
-    &__date {
-      color: var(--primary-high);
-      font-size: var(--font-down-2);
-      white-space: nowrap;
-    }
-
-    .chat-channel-unread-indicator {
-      @include chat-unread-indicator;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 8px;
-      height: 8px;
-
-      &.-urgent {
-        width: auto;
-        height: auto;
-        min-width: 0.6em;
-        padding: 0.3em 0.5em;
-      }
-    }
-  }
-
   &.unfollowing {
     opacity: 0;
   }
@@ -146,8 +133,4 @@
     display: none;
     margin-left: auto;
   }
-
-  .emoji {
-    margin-left: 0.3em;
-  }
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-title.scss b/plugins/chat/assets/stylesheets/common/chat-channel-title.scss
index b56cbd868f3..4b0c0ffd631 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-title.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-title.scss
@@ -1,7 +1,8 @@
 .chat-channel-title {
+  @include ellipsis;
   display: flex;
   align-items: center;
-  @include ellipsis;
+  gap: 0.5rem;
 
   .chat-channel-preview-card & {
     max-width: 100%;
@@ -20,21 +21,6 @@
     overflow: hidden;
   }
 
-  .chat-name,
-  .category-chat-name,
-  &__usernames,
-  .dm-usernames {
-    @include ellipsis;
-    font-size: var(--font-0);
-    margin: 0;
-
-    .emoji {
-      height: 1.2em;
-      vertical-align: text-bottom;
-      width: 1.2em;
-    }
-  }
-
   .d-icon-lock {
     margin-right: 0.25em;
   }
@@ -109,20 +95,3 @@
     width: 1.2em;
   }
 }
-
-.chat-channel-title__name {
-  @include ellipsis;
-  font-size: var(--font-0);
-  color: var(--primary);
-  margin-left: 0.5rem;
-}
-
-.channel-info {
-  .chat-channel-title__name {
-    max-width: 100%;
-  }
-}
-
-.has-unread .chat-channel-title__name {
-  font-weight: bold;
-}
diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss
index d7bb2645af5..609dfae6e40 100644
--- a/plugins/chat/assets/stylesheets/common/index.scss
+++ b/plugins/chat/assets/stylesheets/common/index.scss
@@ -5,7 +5,9 @@
 @import "chat-browse";
 @import "chat-channel";
 @import "chat-channel-card";
+@import "chat-channel-icon";
 @import "chat-channel-info";
+@import "chat-channel-name";
 @import "chat-channel-preview-card";
 @import "chat-channel-title";
 @import "chat-composer-dropdown";
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-channel-row.scss b/plugins/chat/assets/stylesheets/mobile/chat-channel-row.scss
index 23fd18bef8c..b4a368b1ec5 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-channel-row.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-channel-row.scss
@@ -1,3 +1,6 @@
+:root {
+  --channel-list-avatar-size: 43px;
+}
 .chat-channel-row {
   margin: 0;
   border-radius: 0;
@@ -5,8 +8,8 @@
   transition: height 0.25s ease-in-out, opacity 0.25s ease-out;
   transform-origin: top center;
   will-change: height, opacity, left;
-  height: 4em;
   position: relative;
+  height: 4em;
 
   &.-fade-out {
     .chat-channel-row__content {
@@ -20,11 +23,13 @@
 
   &__content {
     padding-inline: 1.5rem;
+    padding-block: 0.5rem;
     z-index: 2;
-    background: var(--primary-very-low);
     box-sizing: border-box;
-    height: 100%;
     transition: border-radius 0.25s ease-in-out;
+    //for sliding delete animation
+    background: var(--primary-very-low);
+    height: 100%;
 
     &.-animate-reset {
       transition: margin-right 0.15s ease-out;
@@ -36,6 +41,28 @@
     }
   }
 
+  &__info {
+    .is-category & {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-grow: 1;
+    }
+    .is-dm & {
+      display: grid;
+      grid-template-areas:
+        "name metadata"
+        "msg msg";
+      width: 100%;
+      align-items: center;
+      &:has(.chat-channel-unread-indicator) {
+        grid-template-areas:
+          "name metadata"
+          "msg metadata";
+      }
+    }
+  }
+
   &__action-btn {
     z-index: 1;
     display: flex;
@@ -69,13 +96,32 @@
     }
   }
 
-  .chat-channel-metadata {
-    .chat-channel-unread-indicator {
-      font-size: var(--font-down-2);
-      margin-top: 0.25rem;
+  .chat-channel {
+    &__user-info,
+    &__channel-info {
+      grid-area: name;
     }
-    &__date {
+    &__metadata {
+      grid-area: metadata;
+      .chat-channel-unread-indicator {
+        font-size: var(--font-down-2);
+        margin-top: 0.25rem;
+      }
+    }
+    &__metadata-date {
       font-size: var(--font-down-2);
     }
+    &__last-message {
+      @include ellipsis;
+      grid-area: msg;
+      font-size: var(--font-down-1-rem);
+      color: var(--primary-high);
+    }
+  }
+
+  .chat-channel-icon {
+    &.--users-count {
+      font-size: var(--font-up-2);
+    }
   }
 }
diff --git a/plugins/chat/spec/system/channel_settings_page_spec.rb b/plugins/chat/spec/system/channel_settings_page_spec.rb
index c69a04bc010..77e94489d14 100644
--- a/plugins/chat/spec/system/channel_settings_page_spec.rb
+++ b/plugins/chat/spec/system/channel_settings_page_spec.rb
@@ -101,7 +101,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
       expect(page.find(".c-channel-settings__name")["innerHTML"].strip).to eq(
         "&lt;script&gt;alert('hello')&lt;/script&gt;",
       )
-      expect(page.find(".chat-channel-title__name")["innerHTML"].strip).to eq(
+      expect(page.find(".chat-channel-name__label")["innerHTML"].strip).to eq(
         "&lt;script&gt;alert('hello')&lt;/script&gt;",
       )
     end
diff --git a/plugins/chat/spec/system/list_channels/mobile_spec.rb b/plugins/chat/spec/system/list_channels/mobile_spec.rb
index a9820c89555..2932f847d09 100644
--- a/plugins/chat/spec/system/list_channels/mobile_spec.rb
+++ b/plugins/chat/spec/system/list_channels/mobile_spec.rb
@@ -15,6 +15,20 @@ RSpec.describe "List channels | mobile", type: :system, mobile: true do
     context "when category channels" do
       fab!(:category_channel_1) { Fabricate(:category_channel) }
 
+      it "doesn’t show the last message" do
+        message =
+          Fabricate(
+            :chat_message,
+            chat_channel: category_channel_1,
+            user: current_user,
+            use_service: true,
+          )
+
+        visit("/chat/direct-messages")
+
+        expect(page).to have_no_selector(".chat-channel__last-message", text: message.message)
+      end
+
       context "when member of the channel" do
         before { category_channel_1.add(current_user) }
 
@@ -61,6 +75,20 @@ RSpec.describe "List channels | mobile", type: :system, mobile: true do
       fab!(:dm_channel_1) { Fabricate(:direct_message_channel, users: [current_user]) }
       fab!(:inaccessible_dm_channel_1) { Fabricate(:direct_message_channel) }
 
+      it "show the last message" do
+        message =
+          Fabricate(
+            :chat_message,
+            chat_channel: dm_channel_1,
+            user: current_user,
+            use_service: true,
+          )
+
+        visit("/chat/direct-messages")
+
+        expect(page).to have_selector(".chat-channel__last-message", text: message.message)
+      end
+
       context "when member of the channel" do
         it "shows the channel in the correct section" do
           visit("/chat/direct-messages")
@@ -80,6 +108,7 @@ RSpec.describe "List channels | mobile", type: :system, mobile: true do
   context "when no category channels" do
     it "hides the section" do
       visit("/chat/channels")
+
       expect(page).to have_no_css(".channels-list-container")
     end
 
diff --git a/plugins/chat/test/javascripts/components/channel-icon-test.gjs b/plugins/chat/test/javascripts/components/channel-icon-test.gjs
new file mode 100644
index 00000000000..1f1afdc33ce
--- /dev/null
+++ b/plugins/chat/test/javascripts/components/channel-icon-test.gjs
@@ -0,0 +1,81 @@
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { exists, query } from "discourse/tests/helpers/qunit-helpers";
+import ChannelIcon from "discourse/plugins/chat/discourse/components/channel-icon";
+import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import { CHATABLE_TYPES } from "discourse/plugins/chat/discourse/models/chat-channel";
+
+module("Discourse Chat | Component | <ChannelIcon />", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("category channel - badge", async function (assert) {
+    const channel = fabricators.channel();
+
+    await render(<template><ChannelIcon @channel={{channel}} /></template>);
+
+    assert.strictEqual(
+      query(".chat-channel-icon.--category-badge").getAttribute("style"),
+      `color: #${channel.chatable.color}`
+    );
+  });
+
+  test("category channel - escapes label", async function (assert) {
+    const channel = fabricators.channel({
+      chatable_type: CHATABLE_TYPES.categoryChannel,
+      title: "<div class='xss'>evil</div>",
+    });
+
+    await render(<template><ChannelIcon @channel={{channel}} /></template>);
+
+    assert.false(exists(".xss"));
+  });
+
+  test("category channel - read restricted", async function (assert) {
+    const channel = fabricators.channel({
+      chatable: fabricators.category({ read_restricted: true }),
+    });
+
+    await render(<template><ChannelIcon @channel={{channel}} /></template>);
+
+    assert.true(exists(".d-icon-lock"));
+  });
+
+  test("category channel - not read restricted", async function (assert) {
+    const channel = fabricators.channel({
+      chatable: fabricators.category({ read_restricted: false }),
+    });
+
+    await render(<template><ChannelIcon @channel={{channel}} /></template>);
+
+    assert.false(exists(".d-icon-lock"));
+  });
+
+  test("dm channel - one user", async function (assert) {
+    const channel = fabricators.directMessageChannel({
+      chatable: fabricators.directMessage({
+        users: [fabricators.user()],
+      }),
+    });
+    const user = channel.chatable.users[0];
+
+    await render(<template><ChannelIcon @channel={{channel}} /></template>);
+
+    assert.true(exists(`.chat-user-avatar .avatar[title="${user.username}"]`));
+  });
+
+  test("dm channel - multiple users", async function (assert) {
+    const channel = fabricators.directMessageChannel({
+      users: [fabricators.user(), fabricators.user(), fabricators.user()],
+    });
+    channel.chatable.group = true;
+    const users = channel.chatable.users;
+
+    await render(<template><ChannelIcon @channel={{channel}} /></template>);
+
+    assert.strictEqual(
+      parseInt(query(".chat-channel-icon.--users-count").innerText.trim(), 10),
+      users.length
+    );
+  });
+});
diff --git a/plugins/chat/test/javascripts/components/channel-name-test.gjs b/plugins/chat/test/javascripts/components/channel-name-test.gjs
new file mode 100644
index 00000000000..6f47ba46a0b
--- /dev/null
+++ b/plugins/chat/test/javascripts/components/channel-name-test.gjs
@@ -0,0 +1,63 @@
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { exists, query } from "discourse/tests/helpers/qunit-helpers";
+import ChannelName from "discourse/plugins/chat/discourse/components/channel-name";
+import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import { CHATABLE_TYPES } from "discourse/plugins/chat/discourse/models/chat-channel";
+
+const CHANNEL_NAME_LABEL = ".chat-channel-name__label";
+
+module("Discourse Chat | Component | <ChannelName />", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("category channel - label", async function (assert) {
+    const channel = fabricators.channel();
+
+    await render(<template><ChannelName @channel={{channel}} /></template>);
+
+    assert.strictEqual(query(CHANNEL_NAME_LABEL).innerText, channel.title);
+  });
+
+  test("category channel - escapes label", async function (assert) {
+    const channel = fabricators.channel({
+      chatable_type: CHATABLE_TYPES.categoryChannel,
+      title: "<div class='xss'>evil</div>",
+    });
+
+    await render(<template><ChannelName @channel={{channel}} /></template>);
+
+    assert.false(exists(".xss"));
+  });
+
+  test("dm channel - one user", async function (assert) {
+    const channel = fabricators.directMessageChannel({
+      chatable: fabricators.directMessage({
+        users: [fabricators.user()],
+      }),
+    });
+    const user = channel.chatable.users[0];
+
+    await render(<template><ChannelName @channel={{channel}} /></template>);
+
+    assert.strictEqual(
+      query(CHANNEL_NAME_LABEL).innerText.trim(),
+      user.username
+    );
+  });
+
+  test("dm channel - multiple users", async function (assert) {
+    const channel = fabricators.directMessageChannel({
+      users: [fabricators.user(), fabricators.user(), fabricators.user()],
+    });
+    channel.chatable.group = true;
+    const users = channel.chatable.users;
+
+    await render(<template><ChannelName @channel={{channel}} /></template>);
+
+    assert.strictEqual(
+      query(CHANNEL_NAME_LABEL).innerText.trim(),
+      users.mapBy("username").join(", ")
+    );
+  });
+});
diff --git a/plugins/chat/test/javascripts/components/channel-title-test.gjs b/plugins/chat/test/javascripts/components/channel-title-test.gjs
new file mode 100644
index 00000000000..d9e6dca9f71
--- /dev/null
+++ b/plugins/chat/test/javascripts/components/channel-title-test.gjs
@@ -0,0 +1,25 @@
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import ChannelTitle from "discourse/plugins/chat/discourse/components/channel-title";
+import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+module("Discourse Chat | Component | <ChannelTitle />", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("icon", async function (assert) {
+    const channel = fabricators.channel();
+
+    await render(<template><ChannelTitle @channel={{channel}} /></template>);
+
+    assert.dom(".chat-channel-icon").exists();
+  });
+
+  test("label", async function (assert) {
+    const channel = fabricators.channel();
+
+    await render(<template><ChannelTitle @channel={{channel}} /></template>);
+
+    assert.dom(".chat-channel-name").exists();
+  });
+});
diff --git a/plugins/chat/test/javascripts/components/channel-title-test.js b/plugins/chat/test/javascripts/components/channel-title-test.js
deleted file mode 100644
index b8fb26b6ed6..00000000000
--- a/plugins/chat/test/javascripts/components/channel-title-test.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { render } from "@ember/test-helpers";
-import hbs from "htmlbars-inline-precompile";
-import { module, test } from "qunit";
-import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { exists, query } from "discourse/tests/helpers/qunit-helpers";
-import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-import { CHATABLE_TYPES } from "discourse/plugins/chat/discourse/models/chat-channel";
-
-module("Discourse Chat | Component | <ChannelTitle />", function (hooks) {
-  setupRenderingTest(hooks);
-
-  test("category channel", async function (assert) {
-    this.channel = fabricators.channel();
-
-    await render(hbs`<ChannelTitle @channel={{this.channel}} />`);
-
-    assert.strictEqual(
-      query(".chat-channel-title__category-badge").getAttribute("style"),
-      `color: #${this.channel.chatable.color}`
-    );
-    assert.strictEqual(
-      query(".chat-channel-title__name").innerText,
-      this.channel.title
-    );
-  });
-
-  test("category channel - escapes title", async function (assert) {
-    this.channel = fabricators.channel({
-      chatable_type: CHATABLE_TYPES.categoryChannel,
-      title: "<div class='xss'>evil</div>",
-    });
-
-    await render(hbs`<ChannelTitle @channel={{this.channel}} />`);
-
-    assert.false(exists(".xss"));
-  });
-
-  test("category channel - read restricted", async function (assert) {
-    this.channel = fabricators.channel({
-      chatable: fabricators.category({ read_restricted: true }),
-    });
-
-    await render(hbs`<ChannelTitle @channel={{this.channel}} />`);
-
-    assert.true(exists(".d-icon-lock"));
-  });
-
-  test("category channel - not read restricted", async function (assert) {
-    this.channel = fabricators.channel({
-      chatable: fabricators.category({ read_restricted: false }),
-    });
-
-    await render(hbs`<ChannelTitle @channel={{this.channel}} />`);
-
-    assert.false(exists(".d-icon-lock"));
-  });
-
-  test("direct message channel - one user", async function (assert) {
-    this.channel = fabricators.directMessageChannel({
-      chatable: fabricators.directMessage({
-        users: [fabricators.user()],
-      }),
-    });
-
-    await render(hbs`<ChannelTitle @channel={{this.channel}} />`);
-
-    const user = this.channel.chatable.users[0];
-
-    assert.true(exists(`.chat-user-avatar .avatar[title="${user.username}"]`));
-    assert.strictEqual(
-      query(".chat-channel-title__name").innerText.trim(),
-      user.username
-    );
-  });
-
-  test("direct message channel - multiple users", async function (assert) {
-    this.channel = fabricators.directMessageChannel({
-      users: [fabricators.user(), fabricators.user(), fabricators.user()],
-    });
-    this.channel.chatable.group = true;
-
-    await render(hbs`<ChannelTitle @channel={{this.channel}} />`);
-
-    const users = this.channel.chatable.users;
-
-    assert.strictEqual(
-      parseInt(query(".chat-channel-title__users-count").innerText.trim(), 10),
-      users.length
-    );
-    assert.strictEqual(
-      query(".chat-channel-title__name").innerText.trim(),
-      users.mapBy("username").join(", ")
-    );
-  });
-});
diff --git a/plugins/chat/test/javascripts/components/chat-channel-metadata-test.js b/plugins/chat/test/javascripts/components/chat-channel-metadata-test.js
index 263162783cb..53f64e92725 100644
--- a/plugins/chat/test/javascripts/components/chat-channel-metadata-test.js
+++ b/plugins/chat/test/javascripts/components/chat-channel-metadata-test.js
@@ -18,14 +18,14 @@ module("Discourse Chat | Component | chat-channel-metadata", function (hooks) {
 
     await render(hbs`<ChatChannelMetadata @channel={{this.channel}} />`);
 
-    assert.dom(".chat-channel-metadata__date").hasText("Yesterday");
+    assert.dom(".chat-channel__metadata-date").hasText("Yesterday");
 
     lastMessageSentAt = moment();
     this.channel.lastMessage.createdAt = lastMessageSentAt;
     await render(hbs`<ChatChannelMetadata @channel={{this.channel}} />`);
 
     assert
-      .dom(".chat-channel-metadata__date")
+      .dom(".chat-channel__metadata-date")
       .hasText(lastMessageSentAt.format("LT"));
   });
 
diff --git a/plugins/chat/test/javascripts/components/chat-channel-preview-card-test.js b/plugins/chat/test/javascripts/components/chat-channel-preview-card-test.js
index 3dbfaa5051c..3e8f395defa 100644
--- a/plugins/chat/test/javascripts/components/chat-channel-preview-card-test.js
+++ b/plugins/chat/test/javascripts/components/chat-channel-preview-card-test.js
@@ -24,13 +24,13 @@ module(
       await render(hbs`<ChatChannelPreviewCard @channel={{this.channel}} />`);
 
       assert.strictEqual(
-        query(".chat-channel-title__name").innerText,
+        query(".chat-channel-name__label").innerText,
         this.channel.title,
         "it shows the channel title"
       );
 
       assert.true(
-        exists(query(".chat-channel-title__category-badge")),
+        exists(query(".chat-channel-icon.--category-badge")),
         "it shows the category hashtag badge"
       );
     });
diff --git a/plugins/chat/test/javascripts/components/chat-channel-row-test.js b/plugins/chat/test/javascripts/components/chat-channel-row-test.js
index afd42da8cd3..0cd7d4dde5d 100644
--- a/plugins/chat/test/javascripts/components/chat-channel-row-test.js
+++ b/plugins/chat/test/javascripts/components/chat-channel-row-test.js
@@ -43,7 +43,9 @@ module("Discourse Chat | Component | chat-channel-row", function (hooks) {
   test("renders correct channel title", async function (assert) {
     await render(hbs`<ChatChannelRow @channel={{this.categoryChatChannel}} />`);
 
-    assert.dom(".chat-channel-title").hasText(this.categoryChatChannel.title);
+    assert
+      .dom(".chat-channel-name__label")
+      .hasText(this.categoryChatChannel.title);
   });
 
   test("renders correct channel metadata", async function (assert) {
@@ -53,7 +55,7 @@ module("Discourse Chat | Component | chat-channel-row", function (hooks) {
     await render(hbs`<ChatChannelRow @channel={{this.categoryChatChannel}} />`);
 
     assert
-      .dom(".chat-channel-metadata")
+      .dom(".chat-channel__metadata-date")
       .hasText(
         moment(this.categoryChatChannel.lastMessage.createdAt).format("h:mm A")
       );