UX: chat message creator scss cleanup + design tweak to username display (#25928)

* UX: chat message creator scss cleanup + design tweak to username display

* add user status with live updates to modal

* show user status description in modal

* add tests for user status

* UX: add user-status styling to chat message creator


---------

Co-authored-by: David Battersby <info@davidbattersby.com>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs

@@ -66,9 +66,7 @@ export default class DTooltip extends Component {
     >
       <div class="fk-d-tooltip__trigger-container">
         {{#if (has-block "trigger")}}
-          <div>
           {{yield this.componentArgs to="trigger"}}
-          </div>
         {{else}}
           {{#if @icon}}
             <span class="fk-d-tooltip__icon">

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

@@ -36,7 +36,7 @@ export default class ChatableGroup extends Component {
       </div>
 
       {{#if this.isDisabled}}
-        <span class="chat-message-creator__chatable -disabled-chat">
+        <span class="chat-message-creator__disabled-warning">
           {{this.group_with_too_many_members}}
         </span>
       {{/if}}

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

@@ -1,5 +1,7 @@
 import Component from "@glimmer/component";
 import { inject as service } from "@ember/service";
+import { modifier } from "ember-modifier";
+import UserStatusMessage from "discourse/components/user-status-message";
 import userStatus from "discourse/helpers/user-status";
 import I18n from "discourse-i18n";
 import gt from "truth-helpers/helpers/gt";
@@ -12,6 +14,14 @@ export default class ChatableUser extends Component {
 
   disabledUserLabel = I18n.t("chat.new_message_modal.disabled_user");
 
+  trackUserStatus = modifier((element, [user]) => {
+    user.statusManager.trackStatus();
+
+    return () => {
+      user.statusManager.stopTrackingStatus();
+    };
+  });
+
   <template>
     <div
       class="chat-message-creator__chatable -user"
@@ -26,8 +36,15 @@ export default class ChatableUser extends Component {
 
       {{userStatus @item.model currentUser=this.currentUser}}
 
+      <div class="user-status" {{this.trackUserStatus @item.model}}>
+        <UserStatusMessage
+          @status={{@item.model.status}}
+          @showDescription={{true}}
+        />
+      </div>
+
       {{#unless @item.enabled}}
-        <span class="chat-message-creator__chatable -disabled-chat">
+        <span class="chat-message-creator__disabled-warning">
           {{this.disabledUserLabel}}
         </span>
       {{/unless}}

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

@@ -1,37 +1,59 @@
-.chat-message-creator__section {
+.chat-message-creator {
+  &__section {
     display: flex;
     width: 100%;
     padding-inline: 1rem 0.5rem;
     box-sizing: border-box;
-}
+  }
 
-.chat-message-creator__add-members {
+  &__add-members {
     display: flex;
     gap: 1rem;
     flex-direction: column;
-}
+  }
 
-.chat-message-creator__participants-count {
+  &__participants-count {
     white-space: nowrap;
-}
+  }
 
-.chat-message-creator__member {
+  &__group-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .chat-message-creator__member & {
+      height: 24px;
+      width: 24px;
+
+      .d-icon.d-icon-user-friends {
+        color: var(--primary-high);
+      }
+    }
+
+    .-group & {
+      width: 26px;
+      height: 26px;
+      .d-icon-user-friends {
+        padding: 5px 5px;
+        box-sizing: border-box;
+        color: var(--primary-high);
+        background: var(--primary-low);
+        border-radius: 100%;
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  &__member {
     @media (prefers-reduced-motion: no-preference) {
       animation: popIn 0.1s ease-out;
     }
-}
-
-.chat-message-creator__member {
     padding: 0 0.25rem;
     border-radius: var(--border-radius);
     background: var(--primary-very-low);
     gap: 0.25rem;
 
-  //I think this class isnt working atm?
-  &.-highlighted {
-    border-color: var(--tertiary);
-  }
-
     &:hover {
       .discourse-no-touch & {
         background: var(--primary-very-low);
@@ -47,26 +69,14 @@
     .d-icon-times {
       margin-left: 0.25rem;
     }
-
-  .chat-message-creator__group-icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 24px;
-    width: 24px;
-
-    .d-icon.d-icon-user-friends {
-      color: var(--primary-high);
   }
-  }
-}
 
-.chat-message-creator__add-members__close-btn {
+  &__add-members__close-btn {
     align-self: flex-start;
     margin-top: 10px;
-}
+  }
 
-.chat-message-creator__add-members-header {
+  &__add-members-header {
     display: flex;
     flex-grow: 1;
     gap: 0.5rem;
@@ -74,9 +84,9 @@
     &-container {
       display: flex;
     }
-}
+  }
 
-.chat-message-creator__new-group-header {
+  &__new-group-header {
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -96,9 +106,9 @@
       border: 0 !important;
       outline: 0 !important;
     }
-}
+  }
 
-.chat-message-creator__new-group-footer {
+  &__new-group-footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -111,17 +121,17 @@
       flex-grow: 1;
       border-top: 1px solid var(--primary-low);
     }
-}
+  }
 
-.chat-message-creator__participants-count {
+  &__participants-count {
     white-space: nowrap;
-}
+  }
 
-.chat-message-creator__warning-max-members {
+  &__warning-max-members {
     padding-inline: 1rem;
-}
+  }
 
-.chat-message-creator__members {
+  &__members {
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -151,18 +161,18 @@
       flex-grow: 1;
       padding-inline: 0 !important;
     }
-}
+  }
 
-.chat-message-creator__members-count {
+  &__members-count {
     white-space: nowrap;
     color: var(--primary-medium);
 
     &.-reached-limit {
       color: var(--danger);
     }
-}
+  }
 
-.chat-message-creator__add-members-footer {
+  &__add-members-footer {
     display: flex;
     flex-grow: 1;
     justify-content: flex-end;
@@ -172,9 +182,9 @@
     &-container {
       display: flex;
     }
-}
+  }
 
-.chat-message-creator__list {
+  &__list {
     list-style: none;
     margin: 0;
     gap: 0.25rem;
@@ -211,33 +221,43 @@
         background: var(--tertiary-very-low);
       }
     }
-}
 
-.chat-message-creator__chatable {
+    .user-status {
       display: flex;
       align-items: center;
+      .fk-d-tooltip__trigger-container {
+        display: flex;
+        align-items: center;
+        gap: 0.25em;
+
+        .emoji {
+          width: var(--font-down-2-rem);
+          height: var(--font-down-2-rem);
+        }
+        .user-status-message-description {
+          @include ellipsis;
+          font-size: var(--font-down-2-rem);
+          color: var(--primary-high);
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  &__group-name {
+    flex-shrink: 0;
+  }
+
+  &__chatable {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
     width: 100%;
     flex-wrap: wrap;
 
-  &.-user .chat-user-display-name {
+    .chat-user-display-name__name {
-    padding-left: 0.5rem;
-  }
-
-  &.-group {
-    .chat-message-creator__group-name {
-      flex-shrink: 0;
-      padding-left: 0.5rem;
-    }
-
-    .chat-message-creator__group-icon .d-icon-user-friends {
-      padding: 5px 5px;
-      box-sizing: border-box;
       color: var(--primary-high);
-      background: var(--primary-low);
+      font-size: var(--font-down-1-rem);
-      border-radius: 100%;
-      width: 24px;
-      height: 22px;
-    }
     }
 
     &.-category-channel .chat-channel-title__category-badge {
@@ -246,10 +266,6 @@
       width: 24px;
     }
 
-  &.-disabled-chat {
-    padding-left: 0.25rem;
-  }
-
     .unread-indicator {
       margin-left: 0.5rem;
       width: 8px;
@@ -257,9 +273,9 @@
       background: var(--tertiary);
       border-radius: 100%;
     }
-}
+  }
 
-.chat-message-creator__search-input {
+  &__search-input {
     display: flex;
     align-items: center;
     border: 1px solid var(--primary-400);
@@ -295,9 +311,9 @@
       outline: none !important;
       background: none !important;
     }
-}
+  }
 
-@keyframes popIn {
+  @keyframes popIn {
     0% {
       transform: scale(0.1);
       opacity: 0;
@@ -307,4 +323,5 @@
       transform: scale(1);
       opacity: 1;
     }
+  }
 }

plugins/chat/spec/system/chat_message_creator_spec.rb

@@ -128,4 +128,20 @@ RSpec.describe "Flag message", type: :system do
     chat_page.message_creator.click_row(group)
     expect(chat_page.message_creator).to be_listing(group)
   end
+
+  it "displays users status next to names" do
+    SiteSetting.enable_user_status = true
+    SiteSetting.chat_allowed_groups = Group::AUTO_GROUPS[:everyone]
+    SiteSetting.direct_message_enabled_groups = Group::AUTO_GROUPS[:everyone]
+
+    current_user.set_status!("gone surfing", "ocean")
+
+    visit("/")
+    chat_page.open_new_message
+    chat_page.message_creator.filter(current_user.username)
+
+    expect(chat_page).to have_selector(
+      ".user-status-message img[alt='#{current_user.user_status.emoji}']",
+    )
+  end
 end