From d0427919f1a7978267264d78713b49d8d355c9d1 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Tue, 28 May 2024 15:00:04 +0200
Subject: [PATCH] UX: add illustrations for empty chat list + split into tabs
 on drawer (#26910)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a placeholder image + CTA in chat, for empty channel and DM lists.

On desktop with drawer mode, we split chat into tabs (like mobile).

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: David Battersby <info@davidbattersby.com>
Co-authored-by: Régis Hanol <regis@hanol.fr>
---
 .../components/channels-list-direct.gjs       |  81 +++++++------
 .../components/channels-list-public.gjs       | 106 +++++++++---------
 .../discourse/components/chat-footer.gjs      |  16 ++-
 .../chat/drawer-routes/channels.gjs           |  36 +++++-
 .../components/empty-channels-list.gjs        |  64 +++++++++++
 .../javascripts/discourse/controllers/chat.js |  10 ++
 .../javascripts/discourse/templates/chat.hbs  |   5 +-
 .../common/chat-channel-preview-card.scss     |   2 +-
 .../stylesheets/common/chat-footer.scss       |  77 +++++++++++++
 .../assets/stylesheets/common/chat-index.scss |  40 ++++---
 .../chat/assets/stylesheets/common/index.scss |   1 +
 .../desktop/chat-index-drawer.scss            |   6 +-
 .../desktop/chat-index-full-page.scss         |  14 +++
 .../stylesheets/mobile/chat-footer.scss       |  66 -----------
 plugins/chat/config/locales/client.en.yml     |   7 +-
 plugins/chat/spec/system/drawer/index_spec.rb |   2 +
 .../spec/system/list_channels/mobile_spec.rb  |   4 +-
 .../system/list_channels/no_sidebar_spec.rb   |  17 ++-
 .../spec/system/page_objects/chat/chat.rb     |   3 +-
 .../chat/components/channel_index.rb          |   2 +-
 .../page_objects/chat_drawer/chat_drawer.rb   |  10 +-
 plugins/chat/spec/system/user_threads_spec.rb |   7 +-
 22 files changed, 363 insertions(+), 213 deletions(-)
 create mode 100644 plugins/chat/assets/javascripts/discourse/components/empty-channels-list.gjs
 create mode 100644 plugins/chat/assets/stylesheets/common/chat-footer.scss

diff --git a/plugins/chat/assets/javascripts/discourse/components/channels-list-direct.gjs b/plugins/chat/assets/javascripts/discourse/components/channels-list-direct.gjs
index d2af7a32fe0..c58745a6288 100644
--- a/plugins/chat/assets/javascripts/discourse/components/channels-list-direct.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/channels-list-direct.gjs
@@ -3,11 +3,13 @@ import { fn, hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import { and } from "truth-helpers";
 import DButton from "discourse/components/d-button";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import dIcon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 import ChatModalNewMessage from "discourse/plugins/chat/discourse/components/chat/modal/new-message";
+import EmptyChannelsList from "discourse/plugins/chat/discourse/components/empty-channels-list";
 import ChatChannelRow from "./chat-channel-row";
 
 export default class ChannelsListDirect extends Component {
@@ -16,11 +18,6 @@ export default class ChannelsListDirect extends Component {
   @service site;
   @service modal;
 
-  @action
-  openNewMessageModal() {
-    this.modal.show(ChatModalNewMessage);
-  }
-
   get inSidebar() {
     return this.args.inSidebar ?? false;
   }
@@ -58,6 +55,11 @@ export default class ChannelsListDirect extends Component {
     this.args.toggleSection(section);
   }
 
+  @action
+  openNewMessageModal() {
+    this.modal.show(ChatModalNewMessage);
+  }
+
   <template>
     <PluginOutlet
       @name="below-direct-chat-channels"
@@ -65,39 +67,35 @@ export default class ChannelsListDirect extends Component {
       @outletArgs={{hash inSidebar=this.inSidebar}}
     />
 
-    {{#if this.showDirectMessageChannels}}
-      {{#if this.site.desktopView}}
-        <div class="chat-channel-divider direct-message-channels-section">
-          {{#if this.inSidebar}}
-            <span
-              class="title-caret"
-              id="direct-message-channels-caret"
-              role="button"
-              title="toggle nav list"
-              {{on
-                "click"
-                (fn this.toggleChannelSection "direct-message-channels")
-              }}
-              data-toggleable="direct-message-channels"
-            >
-              {{dIcon "angle-up"}}
-            </span>
-          {{/if}}
+    {{#if (and this.showDirectMessageChannels this.site.desktopView)}}
+      <div class="chat-channel-divider direct-message-channels-section">
+        {{#if this.inSidebar}}
+          <span
+            class="title-caret"
+            id="direct-message-channels-caret"
+            role="button"
+            title="toggle nav list"
+            {{on
+              "click"
+              (fn this.toggleChannelSection "direct-message-channels")
+            }}
+            data-toggleable="direct-message-channels"
+          >
+            {{dIcon "angle-up"}}
+          </span>
+        {{/if}}
 
-          <span class="channel-title">{{i18n
-              "chat.direct_messages.title"
-            }}</span>
+        <span class="channel-title">{{i18n "chat.direct_messages.title"}}</span>
 
-          {{#if this.canCreateDirectMessageChannel}}
-            <DButton
-              @icon="plus"
-              class="no-text btn-flat open-new-message-btn"
-              @action={{this.openNewMessageModal}}
-              title={{i18n this.createDirectMessageChannelLabel}}
-            />
-          {{/if}}
-        </div>
-      {{/if}}
+        {{#if this.canCreateDirectMessageChannel}}
+          <DButton
+            @icon="plus"
+            class="no-text btn-flat open-new-message-btn"
+            @action={{this.openNewMessageModal}}
+            title={{i18n this.createDirectMessageChannelLabel}}
+          />
+        {{/if}}
+      </div>
     {{/if}}
 
     <div
@@ -105,11 +103,12 @@ export default class ChannelsListDirect extends Component {
       class={{this.directMessageChannelClasses}}
     >
       {{#if this.directMessageChannelsEmpty}}
-        <div class="channel-list-empty-message">
-          <span class="channel-title">{{i18n
-              "chat.no_direct_message_channels"
-            }}</span>
-        </div>
+        <EmptyChannelsList
+          @title={{i18n "chat.no_direct_message_channels"}}
+          @ctaTitle={{i18n "chat.no_direct_message_channels_cta"}}
+          @ctaAction={{this.openNewMessageModal}}
+          @showCTA={{this.canCreateDirectMessageChannel}}
+        />
       {{else}}
         {{#each
           this.chatChannelsManager.truncatedDirectMessageChannels
diff --git a/plugins/chat/assets/javascripts/discourse/components/channels-list-public.gjs b/plugins/chat/assets/javascripts/discourse/components/channels-list-public.gjs
index 842804615d3..13f7d055662 100644
--- a/plugins/chat/assets/javascripts/discourse/components/channels-list-public.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/channels-list-public.gjs
@@ -9,6 +9,7 @@ import PluginOutlet from "discourse/components/plugin-outlet";
 import concatClass from "discourse/helpers/concat-class";
 import dIcon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
+import EmptyChannelsList from "discourse/plugins/chat/discourse/components/empty-channels-list";
 import ChatChannelRow from "./chat-channel-row";
 
 export default class ChannelsListPublic extends Component {
@@ -18,6 +19,7 @@ export default class ChannelsListPublic extends Component {
   @service site;
   @service siteSettings;
   @service currentUser;
+  @service router;
 
   get inSidebar() {
     return this.args.inSidebar ?? false;
@@ -62,8 +64,13 @@ export default class ChannelsListPublic extends Component {
     this.args.toggleSection(section);
   }
 
+  @action
+  openBrowseChannels() {
+    this.router.transitionTo("chat.browse");
+  }
+
   <template>
-    {{#if (and this.site.desktopView this.hasThreadedChannels)}}
+    {{#if (and this.site.desktopView this.inSidebar this.hasThreadedChannels)}}
       <LinkTo @route="chat.threads" class="chat-channel-row --threads">
         <span class="chat-channel-title">
           {{dIcon "discourse-threads" class="chat-user-threads__icon"}}
@@ -77,63 +84,58 @@ export default class ChannelsListPublic extends Component {
       </LinkTo>
     {{/if}}
 
-    {{#if this.displayPublicChannels}}
-      {{#if this.site.desktopView}}
-        <div class="chat-channel-divider public-channels-section">
-          {{#if this.inSidebar}}
-            <span
-              class="title-caret"
-              id="public-channels-caret"
-              role="button"
-              title="toggle nav list"
-              {{on "click" (fn this.toggleChannelSection "public-channels")}}
-              data-toggleable="public-channels"
-            >
-              {{dIcon "angle-up"}}
-            </span>
-          {{/if}}
-
-          <span class="channel-title">{{i18n "chat.chat_channels"}}</span>
-
-          <LinkTo
-            @route="chat.browse"
-            class="btn no-text btn-flat open-browse-page-btn title-action"
-            title={{i18n "chat.channels_list_popup.browse"}}
+    {{#if (and this.displayPublicChannels this.site.desktopView)}}
+      <div class="chat-channel-divider public-channels-section">
+        {{#if this.inSidebar}}
+          <span
+            class="title-caret"
+            id="public-channels-caret"
+            role="button"
+            title="toggle nav list"
+            {{on "click" (fn this.toggleChannelSection "public-channels")}}
+            data-toggleable="public-channels"
           >
-            {{dIcon "pencil-alt"}}
-          </LinkTo>
-        </div>
-      {{/if}}
-
-      <div
-        id="public-channels"
-        class={{concatClass
-          "channels-list-container"
-          "public-channels"
-          (if this.inSidebar "collapsible-sidebar-section")
-        }}
-      >
-        {{#if this.publicMessageChannelsEmpty}}
-          <div class="channel-list-empty-message">
-            <span class="channel-title">{{i18n
-                "chat.no_public_channels"
-              }}</span>
-            <LinkTo @route="chat.browse">
-              {{i18n "chat.click_to_join"}}
-            </LinkTo>
-          </div>
-        {{else}}
-          {{#each this.chatChannelsManager.publicMessageChannels as |channel|}}
-            <ChatChannelRow
-              @channel={{channel}}
-              @options={{hash settingsButton=true}}
-            />
-          {{/each}}
+            {{dIcon "angle-up"}}
+          </span>
         {{/if}}
 
+        <span class="channel-title">{{i18n "chat.chat_channels"}}</span>
+
+        <LinkTo
+          @route="chat.browse"
+          class="btn no-text btn-flat open-browse-page-btn title-action"
+          title={{i18n "chat.channels_list_popup.browse"}}
+        >
+          {{dIcon "pencil-alt"}}
+        </LinkTo>
       </div>
     {{/if}}
 
+    <div
+      id="public-channels"
+      class={{concatClass
+        "channels-list-container"
+        "public-channels"
+        (if this.inSidebar "collapsible-sidebar-section")
+      }}
+    >
+      {{#if this.publicMessageChannelsEmpty}}
+        <EmptyChannelsList
+          @title={{i18n "chat.no_public_channels"}}
+          @ctaTitle={{i18n "chat.no_public_channels_cta"}}
+          @ctaAction={{this.openBrowseChannels}}
+          @showCTA={{this.displayPublicChannels}}
+        />
+      {{else}}
+        {{#each this.chatChannelsManager.publicMessageChannels as |channel|}}
+          <ChatChannelRow
+            @channel={{channel}}
+            @options={{hash settingsButton=true}}
+          />
+        {{/each}}
+      {{/if}}
+    </div>
+
     <PluginOutlet
       @name="below-public-chat-channels"
       @tagName=""
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs
index e74f523f98e..1d92d13d63f 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs
@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import { fn } from "@ember/helper";
 import { service } from "@ember/service";
 import { eq } from "truth-helpers";
 import DButton from "discourse/components/d-button";
@@ -40,7 +41,7 @@ export default class ChatFooter extends Component {
     {{#if this.shouldRenderFooter}}
       <nav class="c-footer">
         <DButton
-          @route="chat.channels"
+          @action={{fn @onClickTab "channels"}}
           @icon="comments"
           @translatedLabel={{i18n "chat.channel_list.title"}}
           aria-label={{i18n "chat.channel_list.aria_label"}}
@@ -48,7 +49,7 @@ export default class ChatFooter extends Component {
           class={{concatClass
             "btn-flat"
             "c-footer__item"
-            (if (eq this.router.currentRouteName "chat.channels") "--active")
+            (if (eq @activeTab "channels") "--active")
           }}
         >
           <UnreadChannelsIndicator />
@@ -56,7 +57,7 @@ export default class ChatFooter extends Component {
 
         {{#if this.directMessagesEnabled}}
           <DButton
-            @route="chat.direct-messages"
+            @action={{fn @onClickTab "direct-messages"}}
             @icon="users"
             @translatedLabel={{i18n "chat.direct_messages.title"}}
             aria-label={{i18n "chat.direct_messages.aria_label"}}
@@ -64,10 +65,7 @@ export default class ChatFooter extends Component {
             class={{concatClass
               "btn-flat"
               "c-footer__item"
-              (if
-                (eq this.router.currentRouteName "chat.direct-messages")
-                "--active"
-              )
+              (if (eq @activeTab "direct-messages") "--active")
             }}
           >
             <UnreadDirectMessagesIndicator />
@@ -76,7 +74,7 @@ export default class ChatFooter extends Component {
 
         {{#if this.includeThreads}}
           <DButton
-            @route="chat.threads"
+            @action={{fn @onClickTab "threads"}}
             @icon="discourse-threads"
             @translatedLabel={{i18n "chat.my_threads.title"}}
             aria-label={{i18n "chat.my_threads.aria_label"}}
@@ -84,7 +82,7 @@ export default class ChatFooter extends Component {
             class={{concatClass
               "btn-flat"
               "c-footer__item"
-              (if (eq this.router.currentRouteName "chat.threads") "--active")
+              (if (eq @activeTab "threads") "--active")
             }}
           >
             <UnreadThreadsIndicator />
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs
index 11c4606b820..33e55da82ab 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs
@@ -1,27 +1,51 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
 import { service } from "@ember/service";
+import { eq } from "truth-helpers";
 import i18n from "discourse-common/helpers/i18n";
-import ChannelsList from "discourse/plugins/chat/discourse/components/channels-list";
+import ChannelsListDirect from "discourse/plugins/chat/discourse/components/channels-list-direct";
+import ChannelsListPublic from "discourse/plugins/chat/discourse/components/channels-list-public";
 import Navbar from "discourse/plugins/chat/discourse/components/chat/navbar";
+import ChatFooter from "discourse/plugins/chat/discourse/components/chat-footer";
+import UserThreads from "discourse/plugins/chat/discourse/components/user-threads";
 
 export default class ChatDrawerRoutesChannels extends Component {
   @service chat;
   @service chatStateManager;
 
+  @tracked activeTab = "channels";
+
+  @action
+  onClickTab(tab) {
+    this.activeTab = tab;
+  }
+
   <template>
     <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
       <navbar.Title @title={{i18n "chat.heading"}} />
-      <navbar.Actions as |action|>
-        <action.ToggleDrawerButton />
-        <action.FullPageButton />
-        <action.CloseDrawerButton />
+      <navbar.Actions as |a|>
+        <a.ToggleDrawerButton />
+        <a.FullPageButton />
+        <a.CloseDrawerButton />
       </navbar.Actions>
     </Navbar>
 
     {{#if this.chatStateManager.isDrawerExpanded}}
       <div class="chat-drawer-content">
-        <ChannelsList />
+        {{#if (eq this.activeTab "channels")}}
+          <ChannelsListPublic />
+        {{else if (eq this.activeTab "direct-messages")}}
+          <ChannelsListDirect />
+        {{else if (eq this.activeTab "threads")}}
+          <UserThreads />
+        {{/if}}
       </div>
+
+      <ChatFooter
+        @activeTab={{this.activeTab}}
+        @onClickTab={{this.onClickTab}}
+      />
     {{/if}}
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/empty-channels-list.gjs b/plugins/chat/assets/javascripts/discourse/components/empty-channels-list.gjs
new file mode 100644
index 00000000000..4cc36776982
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/empty-channels-list.gjs
@@ -0,0 +1,64 @@
+import DButton from "discourse/components/d-button";
+
+const EmptyChannelsList = <template>
+  <div class="channel-list-empty-message">
+    <svg
+      width="217"
+      height="163"
+      viewBox="0 0 217 163"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 128.5C12.5 128.5 30.5 148.5 69.5 142.5C86.9422 139.817 168.5 84.5 197.5 73"
+        stroke="var(--tertiary-high)"
+        stroke-linecap="round"
+        stroke-dasharray="6 6"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M53 15C39.7452 15 29 25.7452 29 39V96.4576C29 109.377 39.2089 119.913 52 120.437V137L74.3809 120.458H156C169.255 120.458 180 109.712 180 96.4576V39C180 25.7452 169.255 15 156 15H53Z"
+        fill="var(--secondary)"
+      />
+      <path
+        d="M52 120.437H52.5V119.957L52.0205 119.938L52 120.437ZM52 137H51.5V137.991L52.2972 137.402L52 137ZM74.3809 120.458V119.958H74.2162L74.0837 120.056L74.3809 120.458ZM29.5 39C29.5 26.0213 40.0213 15.5 53 15.5V14.5C39.469 14.5 28.5 25.469 28.5 39H29.5ZM29.5 96.4576V39H28.5V96.4576H29.5ZM52.0205 119.938C39.4962 119.424 29.5 109.108 29.5 96.4576H28.5C28.5 109.647 38.9216 120.402 51.9795 120.937L52.0205 119.938ZM52.5 137V120.437H51.5V137H52.5ZM74.0837 120.056L51.7028 136.598L52.2972 137.402L74.6781 120.86L74.0837 120.056ZM156 119.958H74.3809V120.958H156V119.958ZM179.5 96.4576C179.5 109.436 168.979 119.958 156 119.958V120.958C169.531 120.958 180.5 109.989 180.5 96.4576H179.5ZM179.5 39V96.4576H180.5V39H179.5ZM156 15.5C168.979 15.5 179.5 26.0213 179.5 39H180.5C180.5 25.469 169.531 14.5 156 14.5V15.5ZM53 15.5H156V14.5H53V15.5Z"
+        fill="var(--tertiary-high)"
+      />
+      <ellipse cx="104" cy="156" rx="96" ry="7" fill="var(--primary-low)" />
+      <path
+        d="M215.833 65.4678L209.881 73.3052C209.749 73.5001 209.525 73.6186 209.283 73.6212C209.158 73.6066 209.033 73.592 208.909 73.525C208.827 73.4803 208.755 73.415 208.695 73.3292L206.751 70.9161L204.851 71.9128C204.691 72.0124 204.513 71.9961 204.369 71.9179C204.142 71.7951 204.057 71.5092 204.18 71.2825L205.252 69.3042C205.341 69.1393 205.46 69.0174 205.598 68.959L213.217 65.6229L204.2 67.8014L202.557 65.7653C202.386 65.5394 202.333 65.244 202.478 64.9761C202.614 64.6765 202.849 64.5374 203.143 64.5366L215.222 64.2836C215.495 64.2716 215.784 64.4279 215.912 64.6838C216.04 64.9397 216.009 65.2428 215.833 65.4678Z"
+        fill="var(--tertiary-high)"
+      />
+      <ellipse
+        cx="148"
+        cy="18.4167"
+        rx="17"
+        ry="18.4167"
+        fill="var(--primary-low)"
+      />
+      <path
+        d="M147.883 8.27081C149.963 8.27081 151.589 9.013 152.761 10.4974C154.157 12.2552 154.855 15.1702 154.855 19.2425C154.855 23.305 154.152 26.2249 152.746 28.0023C151.584 29.4671 149.963 30.1995 147.883 30.1995C145.793 30.1995 144.108 29.3987 142.829 27.7972C141.55 26.1859 140.91 23.3196 140.91 19.1985C140.91 15.1556 141.613 12.2454 143.02 10.4681C144.182 9.00323 145.803 8.27081 147.883 8.27081ZM147.883 11.6839C147.385 11.6839 146.94 11.845 146.55 12.1673C146.159 12.4798 145.856 13.0462 145.642 13.8665C145.358 14.931 145.217 16.723 145.217 19.2425C145.217 21.762 145.344 23.4954 145.598 24.4427C145.852 25.3802 146.169 26.0052 146.55 26.3177C146.94 26.6302 147.385 26.7864 147.883 26.7864C148.381 26.7864 148.825 26.6302 149.216 26.3177C149.606 25.9954 149.909 25.4241 150.124 24.6038C150.407 23.5491 150.549 21.762 150.549 19.2425C150.549 16.723 150.422 14.9944 150.168 14.0569C149.914 13.1097 149.592 12.4798 149.201 12.1673C148.82 11.845 148.381 11.6839 147.883 11.6839Z"
+        fill="var(--primary)"
+      />
+      <path
+        d="M13.013 41.1986C13.4829 41.2395 13.9951 41.6417 14.228 42.2301C14.4696 42.8402 14.3716 43.484 14.057 43.8355L15.3252 47.0389C15.4373 47.3221 15.3665 47.6527 15.1482 47.8652C14.9298 48.0776 14.5988 48.1331 14.3251 48.0146L12.9866 47.4353C11.5265 46.8034 9.87709 46.7758 8.39524 47.3625L8.22091 47.4315L9.32521 50.2209C9.4805 50.6131 9.27441 51.0476 8.90395 51.1943L7.50927 51.7464C7.11702 51.9017 6.69115 51.7174 6.53585 51.3252L5.43155 48.5358C4.64704 48.8464 3.7953 48.4778 3.48472 47.6933L2.65649 45.6013C2.35453 44.8386 2.71451 43.965 3.49901 43.6545L6.46271 42.4811C7.94455 41.8945 9.12808 40.7453 9.7686 39.307L10.3478 37.9685C10.4663 37.6948 10.7455 37.5086 11.0502 37.514C11.3548 37.5195 11.6327 37.7119 11.7362 37.9734L13.013 41.1986ZM7.01486 43.8758L6.84052 43.9448L7.66875 46.0368L7.84309 45.9678C9.58644 45.2776 11.5232 45.2671 13.2748 45.9348L11.0058 40.2036C10.186 41.8893 8.75821 43.1856 7.01486 43.8758Z"
+        fill="var(--tertiary-high)"
+      />
+      <path
+        d="M148.762 128.636C149.155 128.701 149.422 129.101 149.358 129.494C149.29 129.91 148.913 130.181 148.52 130.116C148.103 130.048 147.833 129.671 147.901 129.255C147.965 128.862 148.346 128.568 148.762 128.636ZM151.353 129.061C151.746 129.125 152.013 129.525 151.948 129.918C151.888 130.288 151.484 130.578 151.114 130.518C150.721 130.453 150.427 130.073 150.491 129.679C150.559 129.263 150.936 128.992 151.353 129.061ZM153.943 129.485C154.336 129.549 154.626 129.953 154.539 130.343C154.471 130.759 154.094 131.03 153.701 130.965C153.307 130.901 153.014 130.52 153.082 130.104C153.146 129.711 153.527 129.417 153.943 129.485ZM152.02 124.99C155.281 125.524 157.558 128.153 157.126 130.79C156.694 133.427 153.705 135.146 150.443 134.612C149.68 134.486 148.959 134.25 148.345 133.935C147.572 134.307 146.367 134.704 144.956 134.473C144.725 134.435 144.536 134.285 144.504 134.042C144.469 133.823 144.53 133.595 144.718 133.46C144.718 133.46 145.564 132.791 146.059 131.946C145.428 131.011 145.132 129.918 145.31 128.831C145.746 126.171 148.735 124.452 152.02 124.99ZM150.625 133.501C153.262 133.933 155.659 132.64 155.996 130.581C156.329 128.546 154.451 126.528 151.815 126.096C149.178 125.664 146.754 126.977 146.421 129.013C146.258 130.007 146.622 130.827 146.966 131.334L147.369 131.923L147.008 132.529C146.84 132.834 146.625 133.131 146.394 133.378C146.98 133.284 147.484 133.105 147.845 132.927L148.338 132.675L148.843 132.924C149.391 133.204 150.001 133.399 150.625 133.501Z"
+        fill="var(--tertiary-high)"
+      />
+    </svg>
+
+    <span class="channel-title">{{@title}}</span>
+
+    {{#if @showCTA}}
+      <DButton @action={{@ctaAction}} class="btn btn-primary">
+        {{@ctaTitle}}
+      </DButton>
+    {{/if}}
+  </div>
+</template>;
+
+export default EmptyChannelsList;
diff --git a/plugins/chat/assets/javascripts/discourse/controllers/chat.js b/plugins/chat/assets/javascripts/discourse/controllers/chat.js
index 5e2394500b2..0e42552b67a 100644
--- a/plugins/chat/assets/javascripts/discourse/controllers/chat.js
+++ b/plugins/chat/assets/javascripts/discourse/controllers/chat.js
@@ -1,4 +1,5 @@
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { FOOTER_NAV_ROUTES } from "discourse/plugins/chat/discourse/lib/chat-constants";
 
@@ -23,6 +24,10 @@ export default class ChatController extends Controller {
     return this.siteSettings.navigation_menu === "sidebar";
   }
 
+  get activeTab() {
+    return this.router.currentRouteName.replace(/^chat\./, "");
+  }
+
   get shouldUseChatFooter() {
     return (
       this.site.mobileView &&
@@ -46,4 +51,9 @@ export default class ChatController extends Controller {
 
     return modifierClasses.join(" ");
   }
+
+  @action
+  onClickTab(tab) {
+    return this.router.transitionTo(`chat.${tab}`);
+  }
 }
diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat.hbs
index 292f53880b8..917bb627322 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/chat.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/chat.hbs
@@ -21,7 +21,10 @@
     >
       {{outlet}}
       {{#if this.shouldUseChatFooter}}
-        <ChatFooter />
+        <ChatFooter
+          @activeTab={{this.activeTab}}
+          @onClickTab={{this.onClickTab}}
+        />
       {{/if}}
     </div>
   </div>
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-preview-card.scss b/plugins/chat/assets/stylesheets/common/chat-channel-preview-card.scss
index c91c7f39917..86df4a8a8be 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-preview-card.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-preview-card.scss
@@ -1,5 +1,5 @@
 .chat-channel-preview-card {
-  margin: 1rem 1rem 2rem 1rem;
+  margin: 1rem 0 2rem 0;
   padding: 1.5rem 1rem;
   background-color: var(--secondary-very-high);
   display: flex;
diff --git a/plugins/chat/assets/stylesheets/common/chat-footer.scss b/plugins/chat/assets/stylesheets/common/chat-footer.scss
new file mode 100644
index 00000000000..7adf56a6ff1
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/common/chat-footer.scss
@@ -0,0 +1,77 @@
+.c-footer {
+  grid-area: footer;
+  background: var(--secondary);
+  border-top: 1px solid var(--primary-low);
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  html.footer-nav-ipad &,
+  html.footer-nav-visible & {
+    padding-bottom: calc(
+      env(safe-area-inset-bottom) + var(--footer-nav-height, 0px)
+    );
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-basis: 33%;
+    flex-shrink: 0;
+    flex-grow: 1;
+    padding-block: 0.75rem;
+    height: 100%;
+    position: relative;
+
+    &.--active {
+      .d-icon,
+      .d-button-label {
+        color: var(--quaternary);
+      }
+    }
+    &:hover,
+    &:focus {
+      .discourse-no-touch &,
+      .discourse-touch & {
+        background-color: var(--primary-low);
+        .d-icon,
+        .d-button-label {
+          color: var(--quaternary);
+        }
+      }
+    }
+
+    .d-icon {
+      margin-right: 0;
+      font-size: var(--font-up-4);
+      color: var(--primary-medium);
+
+      &.d-icon-discourse-threads {
+        font-size: var(--font-up-3); //visual correction
+      }
+    }
+
+    .d-button-label {
+      font-size: var(--font-down-1-rem);
+      color: var(--primary-medium);
+    }
+
+    .chat-channel-unread-indicator,
+    .chat-channel-unread-indicator.-urgent {
+      top: 0.25rem;
+      right: unset;
+      left: 50%;
+      margin-left: 0.75rem;
+    }
+
+    .chat-channel-unread-indicator:not(.-urgent) {
+      width: 11px;
+      height: 11px;
+    }
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/common/chat-index.scss b/plugins/chat/assets/stylesheets/common/chat-index.scss
index 7f2b1aa5306..f357ae66712 100644
--- a/plugins/chat/assets/stylesheets/common/chat-index.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-index.scss
@@ -26,10 +26,12 @@
   }
 }
 
-.channels-list {
+.channels-list,
+.channels-list-container {
   padding-bottom: env(safe-area-inset-bottom);
   position: relative;
   @include chat-scrollbar();
+  height: 100%;
 
   @include breakpoint(mobile-large) {
     @include chat-scrollbar();
@@ -63,26 +65,30 @@
   }
 
   .channel-list-empty-message {
-    margin: 1em 0.5em 0.5em 0.5em;
-    padding: 0 1em;
-  }
-
-  .chat-channel-divider {
-    padding: 2.5rem 1.5rem 0.5rem 1.5rem;
     display: flex;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    justify-content: space-between;
-    font-weight: bold;
-    font-family: var(--heading-font-family);
-    font-size: var(--font-down-1);
-    color: var(--quaternary);
+    gap: 1rem;
+    height: 100%;
 
     .channel-title {
-      line-height: var(--line-height-medium);
-    }
-
-    &:first-of-type {
-      padding-top: 1rem;
+      margin-bottom: 1rem;
     }
   }
 }
+
+.chat-channel-divider {
+  padding: 0.5rem 1rem 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: bold;
+  font-family: var(--heading-font-family);
+  font-size: var(--font-down-1);
+  color: var(--quaternary);
+
+  .channel-title {
+    line-height: var(--line-height-medium);
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss
index a9becca82ff..1f476629c2c 100644
--- a/plugins/chat/assets/stylesheets/common/index.scss
+++ b/plugins/chat/assets/stylesheets/common/index.scss
@@ -70,3 +70,4 @@
 @import "chat-audio-upload";
 @import "chat-message-text";
 @import "chat-messages-scroller";
+@import "chat-footer";
diff --git a/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss b/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss
index 3b53646814f..29b55d6cd0f 100644
--- a/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss
+++ b/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss
@@ -1,4 +1,4 @@
-.chat-drawer-container .channels-list {
+.chat-drawer-container .channels-list-container {
   .chat-channel-divider {
     padding: 1.5rem 0.5rem 0.5rem 1rem;
     font-size: var(--font-0);
@@ -42,3 +42,7 @@
     margin-left: 0.5em;
   }
 }
+
+.chat-drawer-container .c-footer .chat-channel-unread-indicator.-urgent {
+  width: min-content;
+}
diff --git a/plugins/chat/assets/stylesheets/desktop/chat-index-full-page.scss b/plugins/chat/assets/stylesheets/desktop/chat-index-full-page.scss
index 3c48c67a52e..489bf7145dc 100644
--- a/plugins/chat/assets/stylesheets/desktop/chat-index-full-page.scss
+++ b/plugins/chat/assets/stylesheets/desktop/chat-index-full-page.scss
@@ -4,6 +4,17 @@
       height: calc(100vh - var(--header-offset));
       border-right: 1px solid var(--primary-low);
       background: var(--primary-very-low);
+      overflow-y: auto;
+
+      .channel-list-empty-message {
+        padding: 1rem;
+        text-align: center;
+
+        svg,
+        .channel-title {
+          display: none;
+        }
+      }
 
       .chat-channel-divider {
         padding: 2rem 1rem 0.5rem 1rem;
@@ -40,5 +51,8 @@
         }
       }
     }
+    .channels-list-container {
+      height: auto;
+    }
   }
 }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
index cd4ef927e45..bfea3a4501f 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
@@ -9,72 +9,6 @@
     grid-area: list;
     padding-bottom: 0;
   }
-
-  .c-footer {
-    grid-area: footer;
-    background: var(--secondary);
-    border-top: 1px solid var(--primary-low);
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-around;
-    position: sticky;
-    bottom: 0;
-    left: 0;
-    padding-bottom: env(safe-area-inset-bottom);
-
-    html.footer-nav-ipad &,
-    html.footer-nav-visible & {
-      padding-bottom: calc(
-        env(safe-area-inset-bottom) + var(--footer-nav-height, 0px)
-      );
-    }
-
-    &__item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      flex-basis: 33%;
-      flex-shrink: 0;
-      padding-block: 0.75rem;
-      height: 100%;
-      position: relative;
-
-      &.--active {
-        .d-icon,
-        .d-button-label {
-          color: var(--quaternary);
-        }
-      }
-
-      .d-icon {
-        margin-right: 0;
-        font-size: var(--font-up-4);
-        color: var(--primary-medium);
-
-        &.d-icon-discourse-threads {
-          font-size: var(--font-up-3); //visual correction
-        }
-      }
-
-      .d-button-label {
-        font-size: var(--font-down-1-rem);
-        color: var(--primary-medium);
-      }
-
-      .chat-channel-unread-indicator,
-      .chat-channel-unread-indicator.-urgent {
-        top: 0.25rem;
-        right: unset;
-        left: 50%;
-        margin-left: 0.75rem;
-      }
-
-      .chat-channel-unread-indicator:not(.-urgent) {
-        width: 11px;
-        height: 11px;
-      }
-    }
-  }
 }
 
 .has-full-page-chat div#reply-control {
diff --git a/plugins/chat/config/locales/client.en.yml b/plugins/chat/config/locales/client.en.yml
index 498fdff7143..ac95550d96a 100644
--- a/plugins/chat/config/locales/client.en.yml
+++ b/plugins/chat/config/locales/client.en.yml
@@ -101,7 +101,6 @@ en:
         browse: "Browse channels"
         create: "New channel"
 
-      click_to_join: "Click here to view available channels."
       close: "Close"
       remove: "Remove"
       collapse: "Collapse Chat Drawer"
@@ -233,8 +232,10 @@ en:
         composer: "Chat composer"
         channels_list: "Chat channels list"
 
-      no_direct_message_channels: "You have not joined any direct message channels."
-      no_public_channels: "You have not joined any channels."
+      no_direct_message_channels: "You have not joined any direct messages, yet!"
+      no_direct_message_channels_cta: "Start a conversation"
+      no_public_channels: "You have not joined any channels, yet!"
+      no_public_channels_cta: "Browse channels"
       kicked_from_channel: "You can no longer access this channel."
       only_chat_push_notifications:
         title: "Only send chat push notifications"
diff --git a/plugins/chat/spec/system/drawer/index_spec.rb b/plugins/chat/spec/system/drawer/index_spec.rb
index ab015798320..4b1eef2ed08 100644
--- a/plugins/chat/spec/system/drawer/index_spec.rb
+++ b/plugins/chat/spec/system/drawer/index_spec.rb
@@ -15,6 +15,7 @@ RSpec.describe "Drawer - index", type: :system do
     row = PageObjects::Components::Chat::ChannelRow.new(channel.id)
 
     drawer_page.visit_index
+    drawer_page.click_direct_messages
 
     expect(row).to exist
 
@@ -33,6 +34,7 @@ RSpec.describe "Drawer - index", type: :system do
     row = PageObjects::Components::Chat::ChannelRow.new(channel.id)
 
     drawer_page.visit_index
+    drawer_page.click_direct_messages
 
     expect(row).to exist
 
diff --git a/plugins/chat/spec/system/list_channels/mobile_spec.rb b/plugins/chat/spec/system/list_channels/mobile_spec.rb
index 296d277f9df..57cb6d2caa7 100644
--- a/plugins/chat/spec/system/list_channels/mobile_spec.rb
+++ b/plugins/chat/spec/system/list_channels/mobile_spec.rb
@@ -155,10 +155,10 @@ RSpec.describe "List channels | mobile", type: :system, mobile: true do
   end
 
   context "when no category channels" do
-    it "hides the section" do
+    it "shows the empty channel list" do
       visit("/chat/channels")
 
-      expect(page).to have_no_css(".channels-list-container")
+      expect(page).to have_selector(".channel-list-empty-message")
     end
 
     context "when user can create channels" do
diff --git a/plugins/chat/spec/system/list_channels/no_sidebar_spec.rb b/plugins/chat/spec/system/list_channels/no_sidebar_spec.rb
index 9d5017a6e1b..b940841be2b 100644
--- a/plugins/chat/spec/system/list_channels/no_sidebar_spec.rb
+++ b/plugins/chat/spec/system/list_channels/no_sidebar_spec.rb
@@ -74,25 +74,30 @@ RSpec.describe "List channels | no sidebar", type: :system do
   end
 
   context "when no category channels" do
-    it "doesn’t show the section" do
+    it "shows the empty channel list" do
       visit("/chat")
-      expect(page).to have_no_css(".public-channels-section")
+      expect(page).to have_css(".c-list-empty-state")
+    end
+
+    it "does not show the create channel button" do
+      visit("/chat")
+      expect(page).to have_no_css(".-navbar__new-channel-button")
     end
 
     context "when user can create channels" do
       before { current_user.update!(admin: true) }
 
-      it "shows the section" do
+      it "shows the new channel button" do
         visit("/chat")
-        expect(page).to have_css(".public-channels-section")
+        expect(page).to have_css(".c-navbar__new-channel-button")
       end
     end
   end
 
   context "when no direct message channels" do
-    it "shows the section" do
+    it "shows the empty channel list" do
       visit("/chat")
-      expect(page).to have_css(".direct-message-channels-section")
+      expect(page).to have_css(".c-list-empty-state")
     end
   end
 
diff --git a/plugins/chat/spec/system/page_objects/chat/chat.rb b/plugins/chat/spec/system/page_objects/chat/chat.rb
index ffab14c1575..374cc87a960 100644
--- a/plugins/chat/spec/system/page_objects/chat/chat.rb
+++ b/plugins/chat/spec/system/page_objects/chat/chat.rb
@@ -60,8 +60,7 @@ module PageObjects
 
       def visit_user_threads
         visit("/chat/threads")
-        has_css?(".spinner")
-        has_no_css?(".spinner")
+        has_finished_loading?
       end
 
       def visit_thread(thread)
diff --git a/plugins/chat/spec/system/page_objects/chat/components/channel_index.rb b/plugins/chat/spec/system/page_objects/chat/components/channel_index.rb
index d62bc4b7b59..60e90b7d059 100644
--- a/plugins/chat/spec/system/page_objects/chat/components/channel_index.rb
+++ b/plugins/chat/spec/system/page_objects/chat/components/channel_index.rb
@@ -6,7 +6,7 @@ module PageObjects
       class ChannelIndex < PageObjects::Components::Base
         attr_reader :context
 
-        SELECTOR = ".channels-list"
+        SELECTOR = ".channels-list-container"
 
         def initialize(context = nil)
           @context = context
diff --git a/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb b/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb
index 52617976ddf..63fe07070a4 100644
--- a/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb
+++ b/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb
@@ -48,11 +48,11 @@ module PageObjects
       end
 
       def has_user_threads_section?
-        has_css?(".chat-channel-row.--threads[href='/chat/threads']")
+        has_css?("#c-footer-threads")
       end
 
       def has_no_user_threads_section?
-        has_no_css?(".chat-channel-row.--threads[href='/chat/threads']")
+        has_no_css?("#c-footer-threads")
       end
 
       def has_unread_user_threads?
@@ -63,8 +63,12 @@ module PageObjects
         has_no_css?(".chat-channel-row.--threads .c-unread-indicator")
       end
 
+      def click_direct_messages
+        find("#c-footer-direct-messages").click
+      end
+
       def click_user_threads
-        find(".chat-channel-row.--threads").click
+        find("#c-footer-threads").click
       end
 
       def maximize
diff --git a/plugins/chat/spec/system/user_threads_spec.rb b/plugins/chat/spec/system/user_threads_spec.rb
index 1d861cf092d..3f9a19aef51 100644
--- a/plugins/chat/spec/system/user_threads_spec.rb
+++ b/plugins/chat/spec/system/user_threads_spec.rb
@@ -133,13 +133,14 @@ RSpec.describe "User threads", type: :system do
   end
 
   context "when in drawer" do
+    before { SiteSetting.chat_threads_enabled = true }
+
     context "when user is a member of at least one channel with threads" do
       before { channel_1.add(current_user) }
 
-      it "shows a link to user threads" do
+      it "shows the user threads tab" do
         visit("/")
         chat_page.open_from_header
-
         expect(drawer_page).to have_user_threads_section
       end
     end
@@ -245,6 +246,8 @@ RSpec.describe "User threads", type: :system do
 
   context "when in mobile", mobile: true do
     before do
+      SiteSetting.chat_threads_enabled = true
+
       last_message =
         chat_thread_chain_bootstrap(
           channel: channel_1,