diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.js b/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.gjs
similarity index 62%
rename from plugins/chat/assets/javascripts/discourse/components/chat/header/icon.js
rename to plugins/chat/assets/javascripts/discourse/components/chat/header/icon.gjs
index 964823aa4bf..6e4ae63b1f7 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.js
+++ b/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() {
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.hbs
deleted file mode 100644
index 3fd922ddef2..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon.hbs
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.js b/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.gjs
similarity index 75%
rename from plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.js
rename to plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.gjs
index 41b8c3e9855..0932f3cdd4d 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.js
+++ b/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) {
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.hbs
deleted file mode 100644
index 973955c09c3..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.hbs
+++ /dev/null
@@ -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}}
\ No newline at end of file
diff --git a/plugins/chat/test/javascripts/components/chat-header-icon-test.js b/plugins/chat/test/javascripts/components/chat-header-icon-test.js
index c137868c3a4..cf45960e61b 100644
--- a/plugins/chat/test/javascripts/components/chat-header-icon-test.js
+++ b/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");
+ });
});