UX: hides header's unread indicator on full page (#23370)

The unread(s) will still show in the sidebar, outside of chat and when in drawer mode. This is to prevent the confusion to show an unread count for chat on a button which is going to take the user out of chat.

plugins/chat/assets/javascripts/discourse/components/chat/header/icon.gjs

@@ -2,12 +2,42 @@ import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import getURL from "discourse-common/lib/get-url";
 import { getUserChatSeparateSidebarMode } from "discourse/plugins/chat/discourse/lib/get-user-chat-separate-sidebar-mode";
+import ChatHeaderIconUnreadIndicator from "discourse/plugins/chat/discourse/components/chat/header/icon/unread-indicator";
+import icon from "discourse-common/helpers/d-icon";
+import concatClass from "discourse/helpers/concat-class";
+import I18n from "I18n";
+
 export default class ChatHeaderIcon extends Component {
+  <template>
+    <a
+      href={{this.href}}
+      tabindex="0"
+      class={{concatClass "icon" "btn-flat" (if this.isActive "active")}}
+      title={{this.title}}
+    >
+      {{~icon this.icon~}}
+      {{#if this.showUnreadIndicator}}
+        <ChatHeaderIconUnreadIndicator
+          @urgentCount={{@urgentCount}}
+          @unreadCount={{@unreadCount}}
+          @indicatorPreference={{@indicatorPreference}}
+        />
+      {{/if}}
+    </a>
+  </template>
+
   @service currentUser;
   @service site;
   @service chatStateManager;
   @service router;
 
+  get showUnreadIndicator() {
+    if (this.chatStateManager.isFullPageActive && this.site.desktopView) {
+      return false;
+    }
+    return !this.currentUserInDnD;
+  }
+
   get currentUserInDnD() {
     return this.args.currentUserInDnD || this.currentUser.isInDoNotDisturb();
   }
@@ -30,10 +60,10 @@ export default class ChatHeaderIcon extends Component {
       !this.chatSeparateSidebarMode.never &&
       !this.site.mobileView
     ) {
-      return "sidebar.panels.forum.label";
+      return I18n.t("sidebar.panels.forum.label");
     }
 
-    return "chat.title_capitalized";
+    return I18n.t("chat.title_capitalized");
   }
 
   get icon() {

plugins/chat/assets/javascripts/discourse/components/chat/header/icon.hbs

@@ -1,15 +0,0 @@
-<a
-  href={{this.href}}
-  tabindex="0"
-  class={{concat-class "icon" "btn-flat" (if this.isActive "active")}}
-  title={{i18n this.title}}
->
-  {{d-icon this.icon}}
-  {{#unless this.currentUserInDnD}}
-    <Chat::Header::Icon::UnreadIndicator
-      @urgentCount={{@urgentCount}}
-      @unreadCount={{@unreadCount}}
-      @indicatorPreference={{@indicatorPreference}}
-    />
-  {{/unless}}
-</a>

plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.gjs

@@ -6,7 +6,21 @@ import {
   HEADER_INDICATOR_PREFERENCE_NEVER,
 } from "discourse/plugins/chat/discourse/controllers/preferences-chat";
 
+const MAX_UNREAD_COUNT = 99;
+
 export default class ChatHeaderIconUnreadIndicator extends Component {
+  <template>
+    {{#if this.showUrgentIndicator}}
+      <div class="chat-channel-unread-indicator -urgent">
+        <div class="chat-channel-unread-indicator__number">
+          {{this.unreadCountLabel}}
+        </div>
+      </div>
+    {{else if this.showUnreadIndicator}}
+      <div class="chat-channel-unread-indicator"></div>
+    {{/if}}
+  </template>
+
   @service chatTrackingStateManager;
   @service currentUser;
 
@@ -49,7 +63,9 @@ export default class ChatHeaderIconUnreadIndicator extends Component {
   }
 
   get unreadCountLabel() {
-    return this.urgentCount > 99 ? "99+" : this.urgentCount;
+    return this.urgentCount > MAX_UNREAD_COUNT
+      ? `${MAX_UNREAD_COUNT}+`
+      : this.urgentCount;
   }
 
   #hasAnyIndicatorPreference(preferences) {

plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.hbs

@@ -1,9 +0,0 @@
-{{#if this.showUrgentIndicator}}
-  <div class="chat-channel-unread-indicator -urgent">
-    <div class="chat-channel-unread-indicator__number">
-      {{this.unreadCountLabel}}
-    </div>
-  </div>
-{{else if this.showUnreadIndicator}}
-  <div class="chat-channel-unread-indicator"></div>
-{{/if}}

plugins/chat/test/javascripts/components/chat-header-icon-test.js

@@ -4,6 +4,7 @@ import { render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import sinon from "sinon";
 import I18n from "I18n";
+import { HEADER_INDICATOR_PREFERENCE_ALL_NEW } from "discourse/plugins/chat/discourse/controllers/preferences-chat";
 
 module("Discourse Chat | Component | chat-header-icon", function (hooks) {
   setupRenderingTest(hooks);
@@ -54,4 +55,41 @@ module("Discourse Chat | Component | chat-header-icon", function (hooks) {
 
     assert.dom(".d-icon-d-chat").exists();
   });
+
+  test("full page - with unread", async function (assert) {
+    this.currentUser.user_option.chat_separate_sidebar_mode = "always";
+    this.currentUser.user_option.chat_header_indicator_preference =
+      HEADER_INDICATOR_PREFERENCE_ALL_NEW;
+
+    sinon
+      .stub(this.owner.lookup("service:chat-state-manager"), "isFullPageActive")
+      .value(true);
+
+    await render(hbs`<Chat::Header::Icon @urgentCount={{1}} />`);
+
+    assert
+      .dom(".icon.btn-flat")
+      .hasAttribute("title", I18n.t("sidebar.panels.forum.label"))
+      .hasAttribute("href", "/latest");
+    assert.dom(".d-icon-random").exists();
+    assert.dom(".chat-channel-unread-indicator__number").doesNotExist();
+  });
+
+  test("drawer - with unread", async function (assert) {
+    this.currentUser.user_option.chat_separate_sidebar_mode = "always";
+    this.currentUser.user_option.chat_header_indicator_preference =
+      HEADER_INDICATOR_PREFERENCE_ALL_NEW;
+
+    await render(hbs`<Chat::Header::Icon @urgentCount={{1}} />`);
+
+    assert
+      .dom(".icon.btn-flat")
+      .hasAttribute("title", I18n.t("sidebar.panels.chat.label"))
+      .hasAttribute("href", "/chat");
+    assert.dom(".d-icon-d-chat").exists();
+    assert
+      .dom(".chat-channel-unread-indicator__number")
+      .exists()
+      .containsText("1");
+  });
 });