UX: improves search of message creator

- correctly show unread indicator
- handles disabled user correctly
- do not show new-group-chat when filtering

plugins/chat/assets/javascripts/discourse/components/chat/message-creator/channel.gjs

@@ -16,10 +16,11 @@ export default class Channel extends Component {
   }
 
   <template>
-    <div class="chat-message-creator__chatable-category-channel">
+    <div class="chat-message-creator__chatable -category-channel">
       <ChatChannelTitle @channel={{@item.model}} />
 
       {{#if (gt @item.tracking.unreadCount 0)}}
+
         <div
           class={{concatClass "unread-indicator" (if this.isUrgent "-urgent")}}
         ></div>

plugins/chat/assets/javascripts/discourse/components/chat/message-creator/list.gjs

@@ -5,6 +5,7 @@ import { action } from "@ember/object";
 import concatClass from "discourse/helpers/concat-class";
 import I18n from "discourse-i18n";
 import eq from "truth-helpers/helpers/eq";
+import not from "truth-helpers/helpers/not";
 import Channel from "./channel";
 import ListAction from "./list-action";
 import User from "./user";
@@ -73,6 +74,7 @@ export default class List extends Component {
                 tabindex="0"
                 data-identifier={{item.identifier}}
                 id={{item.id}}
+                data-disabled={{not item.enabled}}
               >
                 {{component (this.componentForItem item.type) item=item}}
               </li>

plugins/chat/assets/javascripts/discourse/components/chat/message-creator/members-selector.gjs

@@ -43,6 +43,10 @@ export default class MembersSelector extends Component {
 
   @action
   selectChatable(chatable) {
+    if (!chatable.enabled) {
+      return;
+    }
+
     if (
       this.args.members.length + (this.args.channel?.membershipsCount ?? 0) >=
       this.siteSettings.chat_max_direct_message_users

plugins/chat/assets/javascripts/discourse/components/chat/message-creator/search.gjs

@@ -21,19 +21,28 @@ export default class ChatMessageCreatorSearch extends Component {
 
   @tracked chatables = [];
   @tracked highlightedChatable;
+  @tracked term;
+  @tracked loading = false;
 
   get items() {
-    return [
-      {
+    const items = [];
+
+    if (this.loading) {
+      return items;
+    }
+
+    if (!this.term?.length) {
+      items.push({
         identifier: "new-group",
         type: "list-action",
         label: I18n.t("chat.new_message_modal.new_group_chat"),
         enabled: true,
         icon: "users",
         id: "new-group-chat",
-      },
-      ...this.chatables,
-    ];
+      });
+    }
+
+    return [...items, ...this.chatables];
   }
 
   @action
@@ -53,6 +62,10 @@ export default class ChatMessageCreatorSearch extends Component {
         this.args.onChangeMode(MODES.new_group);
         break;
       case "user":
+        if (!item.enabled) {
+          return;
+        }
+
         await this.startOneToOneChannel(item.model.username);
         break;
       default:
@@ -64,6 +77,9 @@ export default class ChatMessageCreatorSearch extends Component {
 
   @action
   onFilter(event) {
+    this.chatables = [];
+    this.term = event?.target?.value;
+
     this.searchHandler = discourseDebounce(
       this,
       this.fetch,
@@ -73,9 +89,11 @@ export default class ChatMessageCreatorSearch extends Component {
   }
 
   @action
-  async fetch(term) {
+  async fetch() {
     const loader = new ChatablesLoader(this);
-    this.chatables = await loader.search(term, { preloadChannels: true });
+    this.chatables = await loader.search(this.term, {
+      preloadChannels: !this.term,
+    });
 
     this.highlightedChatable = this.items[0];
   }
@@ -109,7 +127,7 @@ export default class ChatMessageCreatorSearch extends Component {
             class="chat-message-creator__section"
             {{didInsert (fn this.fetch null)}}
           >
-            <SearchInput @onFilter={{this.onFilter}} />
+            <SearchInput @filter={{this.term}} @onFilter={{this.onFilter}} />
 
             <DButton
               class="btn-flat chat-message-creator__search-input__cancel-button"

plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user.gjs

@@ -12,7 +12,7 @@ export default class ChatableUser extends Component {
   disabledUserLabel = I18n.t("chat.new_message_modal.disabled_user");
 
   <template>
-    <div class="chat-message-creator__chatable-user">
+    <div class="chat-message-creator__chatable -user">
       <ChatUserAvatar @user={{@item.model}} @interactive={{false}} />
       <ChatUserDisplayName @user={{@item.model}} />
 
@@ -23,7 +23,7 @@ export default class ChatableUser extends Component {
       {{userStatus @item.model currentUser=this.currentUser}}
 
       {{#unless @item.enabled}}
-        <span class="disabled-text">
+        <span class="chat-message-creator__chatable -disabled-chat">
           {{this.disabledUserLabel}}
         </span>
       {{/unless}}

plugins/chat/assets/stylesheets/common/chat-message-creator.scss

@@ -175,14 +175,19 @@
     display: flex;
     align-items: center;
 
+    &[data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
     .d-icon-users {
-      padding: 2px 2px;
+      padding: 4px 4px;
       box-sizing: border-box;
       color: var(--tertiary);
       background: var(--primary-low);
       border-radius: 100%;
-      width: 18px;
-      height: 18px;
+      width: 24px;
+      height: 22px;
     }
 
     .btn {
@@ -195,12 +200,35 @@
   }
 }
 
-.chat-message-creator__chatable-user {
+.chat-message-creator__chatable.-user {
+  .chat-user-display-name {
+    padding-left: 0.5rem;
+  }
+
+  .chat-message-creator__chatable.-disabled-chat {
+    padding-left: 0.25rem;
+  }
+}
+
+.chat-message-creator__chatable.-category-channel {
+  .chat-channel-title__category-badge {
+    display: flex;
+    justify-content: center;
+    width: 24px;
+  }
+}
+
+.chat-message-creator__chatable.-user,
+.chat-message-creator__chatable.-category-channel {
   display: flex;
   align-items: center;
 
-  .chat-user-display-name {
-    padding-left: 0.5rem;
+  .unread-indicator {
+    margin-left: 0.5rem;
+    width: 8px;
+    height: 8px;
+    background: var(--tertiary);
+    border-radius: 100%;
   }
 }
 

plugins/chat/spec/system/chat_message_creator_spec.rb

@@ -20,6 +20,14 @@ RSpec.describe "Flag message", type: :system do
     expect(chat_page.message_creator).to be_listing(channel_1)
   end
 
+  it "doesn’t show create group option when filtered" do
+    visit("/")
+    chat_page.open_new_message
+    chat_page.message_creator.filter("x")
+
+    expect(chat_page).to have_no_css("#new-group-chat")
+  end
+
   it "can filter channels" do
     channel_1 = Fabricate(:chat_channel)
     channel_2 = Fabricate(:chat_channel)