2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-10-03 17:21:20 +08:00

FIX: hides redundant chat icon on mobile chat routes (#35015)

### Chat in Mobile view

In order to reduce visual noise in mobile view, there is no need to show
chat icon in header, once user has already chat open.

|Before|After|
|---|---|
|<img width="456" height="199" alt="Screenshot 2025-10-01 at 17 16 29"
src="https://github.com/user-attachments/assets/6d124a79-4a0a-4edd-913a-43a0cfa05623"
/>|<img width="442" height="198" alt="Screenshot 2025-10-01 at 17 16 06"
src="https://github.com/user-attachments/assets/052a2f78-574e-4d35-aff4-264f54f2fb15"
/>|
This commit is contained in:
Yuriy Kurant 2025-10-01 17:34:15 +03:00 committed by GitHub
parent d7cea61e36
commit eae2370424
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 73 additions and 51 deletions

View file

@ -1,5 +1,6 @@
import Component from "@glimmer/component";
import { service } from "@ember/service";
import { and } from "truth-helpers";
import DButton from "discourse/components/d-button";
import concatClass from "discourse/helpers/concat-class";
import icon from "discourse/helpers/d-icon";
@ -61,10 +62,6 @@ export default class ChatHeaderIcon extends Component {
}

get href() {
if (this.site.mobileView && this.chatStateManager.isFullPageActive) {
return getURL("/chat");
}

if (
this.chatStateManager.isFullPageActive &&
!this.chatSeparateSidebarMode.never
@ -80,22 +77,24 @@ export default class ChatHeaderIcon extends Component {
}

<template>
<li class="header-dropdown-toggle chat-header-icon">
<DButton
@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}}
</DButton>
</li>
{{#unless (and this.site.mobileView this.isActive)}}
<li class="header-dropdown-toggle chat-header-icon">
<DButton
@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}}
</DButton>
</li>
{{/unless}}
</template>
}

View file

@ -84,8 +84,8 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do

create_message(channel_1, user: user_1)

expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "")
expect(channels_index_page).to have_unread_channel(channel_1)
expect(chat_page.footer).to have_unread_channels
end
end

@ -101,8 +101,8 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
message: "hello @#{current_user.username} what's up?",
)

expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator")
expect(channels_index_page).to have_unread_channel(channel_1, count: 1)
expect(chat_page.footer).to have_unread_channels
end

it "shows correct count when there are multiple messages but only 1 is urgent" do
@ -118,11 +118,8 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do

3.times { create_message(channel_1, user: user_1) }

expect(page).to have_css(
".chat-header-icon .chat-channel-unread-indicator",
text: "1",
)
expect(channels_index_page).to have_unread_channel(channel_1, count: 1)
expect(chat_page.footer).to have_unread_channels
end
end
end
@ -141,21 +138,12 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
visit("/chat/direct-messages")

create_message(dm_channel_1, user: user_1)

expect(page).to have_css(
".chat-header-icon .chat-channel-unread-indicator",
text: "1",
wait: 25,
)
expect(channels_index_page).to have_unread_channel(dm_channel_1, wait: 25)
expect(channels_index_page).to have_unread_channel(dm_channel_1, count: 1, wait: 25)
expect(chat_page.footer).to have_unread_dms("1")

create_message(dm_channel_1, user: user_1)

expect(page).to have_css(
".chat-header-icon .chat-channel-unread-indicator",
text: "2",
wait: 25,
)
expect(channels_index_page).to have_unread_channel(dm_channel_1, count: 2, wait: 25)
expect(chat_page.footer).to have_unread_dms("2")
end

it "reorders channels" do
@ -223,18 +211,12 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
context "when messages are created" do
it "correctly renders notifications" do
visit("/chat/channels")

create_message(channel_1, user: user_1)

expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "")
expect(channels_index_page).to have_unread_channel(channel_1)

visit("/chat/direct-messages")

create_message(dm_channel_1, user: user_1)

expect(channels_index_page).to have_unread_channel(dm_channel_1)
expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "1")
end
end
end

View file

@ -38,10 +38,10 @@ RSpec.describe "Navigation", type: :system do
end
end

context "when clicking chat icon on mobile and is viewing channel" do
context "when clicking back button on mobile and is viewing channel" do
it "navigates to channels tab", mobile: true do
chat_page.visit_channel(category_channel_2)
chat_page.open_from_header
chat_page.back_to_channels_list

expect(page).to have_current_path("/chat/channels")
end

View file

@ -11,6 +11,10 @@ module PageObjects
@sidebar ||= PageObjects::Components::Chat::Sidebar.new
end

def footer
@footer ||= PageObjects::Components::Chat::Footer.new
end

def prefers_full_page
page.execute_script(
"window.localStorage.setItem('discourse_chat_preferred_mode', '\"FULL_PAGE_CHAT\"');",
@ -33,6 +37,11 @@ module PageObjects
has_no_css?("html.has-chat")
end

def back_to_channels_list
find(".d-icon.d-icon-chevron-left").click
has_css?("html.has-chat")
end

def has_header_href?(href)
find(".chat-header-icon").has_link?(href: href)
end

View file

@ -0,0 +1,17 @@
# frozen_string_literal: true

module PageObjects
module Components
module Chat
class Footer < PageObjects::Components::Base
def has_unread_channels?
has_css?(".c-footer #c-footer-channels .c-unread-indicator")
end

def has_unread_dms?(text)
has_css?(".c-footer #c-footer-direct-messages .c-unread-indicator", text: text)
end
end
end
end
end

View file

@ -1,4 +1,5 @@
import { render } from "@ember/test-helpers";
import { tracked } from "@glimmer/tracking";
import { render, settled } from "@ember/test-helpers";
import { module, test } from "qunit";
import sinon from "sinon";
import { forceMobile } from "discourse/lib/mobile";
@ -43,16 +44,30 @@ module("Discourse Chat | Component | chat-header-icon", function (hooks) {
});

test("mobile", async function (assert) {
const testState = new (class {
@tracked isActive = false;
})();

forceMobile();

await render(<template><Icon /></template>);
await render(
<template><Icon @isActive={{testState.isActive}} /></template>
);

assert
.dom(".icon.btn-flat")
.hasAttribute("title", i18n("chat.title_capitalized"))
.hasAttribute("href", "/chat");

assert.dom(".d-icon-d-chat").exists();
assert
.dom(".d-icon-d-chat")
.exists("chat icon is rendered if chat is inactive");

testState.isActive = true;
await settled();
assert
.dom(".d-icon-d-chat")
.doesNotExist("chat icon is not rendered if chat is active");
});

test("full page - with unread", async function (assert) {