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"}}
-            {{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,310 +1,327 @@
-.chat-message-creator__section {
+.chat-message-creator {
-  display: flex;
+  &__section {
-  width: 100%;
+    display: flex;
-  padding-inline: 1rem 0.5rem;
+    width: 100%;
-  box-sizing: border-box;
+    padding-inline: 1rem 0.5rem;
-}
+    box-sizing: border-box;
-
-.chat-message-creator__add-members {
-  display: flex;
-  gap: 1rem;
-  flex-direction: column;
-}
-
-.chat-message-creator__participants-count {
-  white-space: nowrap;
-}
-
-.chat-message-creator__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 {
+  &__add-members {
-    .discourse-no-touch & {
+    display: flex;
-      background: var(--primary-very-low);
+    gap: 1rem;
-      color: var(--primary);
+    flex-direction: column;
-      border-color: var(--tertiary);
+  }
 
-      .d-icon-times {
+  &__participants-count {
-        color: var(--primary);
+    white-space: nowrap;
+  }
+
+  &__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;
       }
     }
   }
 
-  .d-icon-times {
+  &__member {
-    margin-left: 0.25rem;
+    @media (prefers-reduced-motion: no-preference) {
-  }
+      animation: popIn 0.1s ease-out;
+    }
+    padding: 0 0.25rem;
+    border-radius: var(--border-radius);
+    background: var(--primary-very-low);
+    gap: 0.25rem;
 
-  .chat-message-creator__group-icon {
+    &:hover {
-    display: flex;
+      .discourse-no-touch & {
-    justify-content: center;
+        background: var(--primary-very-low);
-    align-items: center;
+        color: var(--primary);
-    height: 24px;
+        border-color: var(--tertiary);
-    width: 24px;
 
-    .d-icon.d-icon-user-friends {
+        .d-icon-times {
-      color: var(--primary-high);
+          color: var(--primary);
+        }
+      }
+    }
+
+    .d-icon-times {
+      margin-left: 0.25rem;
     }
   }
-}
 
-.chat-message-creator__add-members__close-btn {
+  &__add-members__close-btn {
-  align-self: flex-start;
+    align-self: flex-start;
-  margin-top: 10px;
+    margin-top: 10px;
-}
-
-.chat-message-creator__add-members-header {
-  display: flex;
-  flex-grow: 1;
-  gap: 0.5rem;
-
-  &-container {
-    display: flex;
   }
-}
 
-.chat-message-creator__new-group-header {
+  &__add-members-header {
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  padding-inline: 1rem;
-
-  &-container {
     display: flex;
     flex-grow: 1;
-    padding-bottom: 0.5rem;
+    gap: 0.5rem;
-    border-bottom: 1px solid var(--primary-low);
+
+    &-container {
+      display: flex;
+    }
   }
 
-  &__input {
+  &__new-group-header {
-    padding-inline: 0 !important;
-    width: 100% !important;
-    margin: 0 !important;
-    border: 0 !important;
-    outline: 0 !important;
-  }
-}
-
-.chat-message-creator__new-group-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-grow: 1;
-  gap: 1rem;
-  padding: 1rem 1rem 0;
-
-  &-container {
     display: flex;
+    align-items: center;
     flex-grow: 1;
-    border-top: 1px solid var(--primary-low);
+    padding-inline: 1rem;
-  }
-}
 
-.chat-message-creator__participants-count {
+    &-container {
-  white-space: nowrap;
+      display: flex;
-}
+      flex-grow: 1;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid var(--primary-low);
+    }
 
-.chat-message-creator__warning-max-members {
+    &__input {
-  padding-inline: 1rem;
+      padding-inline: 0 !important;
-}
+      width: 100% !important;
-
+      margin: 0 !important;
-.chat-message-creator__members {
+      border: 0 !important;
-  display: flex;
+      outline: 0 !important;
-  align-items: center;
+    }
-  flex-grow: 1;
-  padding: 0.5rem;
-  background: var(--primary-low);
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  border-radius: var(--border-radius);
-  min-height: 50px;
-  box-sizing: border-box;
-
-  .d-icon-search {
-    color: var(--primary-high);
   }
 
-  &-container {
+  &__new-group-footer {
     display: flex;
+    align-items: center;
+    justify-content: flex-end;
     flex-grow: 1;
+    gap: 1rem;
+    padding: 1rem 1rem 0;
+
+    &-container {
+      display: flex;
+      flex-grow: 1;
+      border-top: 1px solid var(--primary-low);
+    }
   }
 
-  &-input {
+  &__participants-count {
-    background: none !important;
+    white-space: nowrap;
-    margin: 0 !important;
-    border: 0 !important;
-    outline: 0 !important;
-    min-width: 200px;
-    flex-grow: 1;
-    padding-inline: 0 !important;
   }
-}
 
-.chat-message-creator__members-count {
+  &__warning-max-members {
-  white-space: nowrap;
+    padding-inline: 1rem;
-  color: var(--primary-medium);
-
-  &.-reached-limit {
-    color: var(--danger);
   }
-}
 
-.chat-message-creator__add-members-footer {
+  &__members {
-  display: flex;
-  flex-grow: 1;
-  justify-content: flex-end;
-  padding-top: 1rem;
-  border-top: 1px solid var(--primary-low);
-
-  &-container {
     display: flex;
-  }
+    align-items: center;
-}
+    flex-grow: 1;
-
+    padding: 0.5rem;
-.chat-message-creator__list {
+    background: var(--primary-low);
-  list-style: none;
+    flex-wrap: wrap;
-  margin: 0;
+    gap: 0.5rem;
-  gap: 0.25rem;
+    border-radius: var(--border-radius);
-  display: flex;
+    min-height: 50px;
-  flex-direction: column;
-
-  [data-disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &-item {
     box-sizing: border-box;
-    cursor: pointer;
-    padding: 0.5rem 1rem;
-    display: flex;
-    align-items: center;
 
-    .d-icon-users {
+    .d-icon-search {
-      padding: 4px 4px;
-      box-sizing: border-box;
-      color: var(--tertiary);
-      background: var(--primary-low);
-      border-radius: 100%;
-      width: 24px;
-      height: 22px;
-    }
-
-    .btn {
-      padding: 0;
-    }
-
-    &.-highlighted {
-      background: var(--tertiary-very-low);
-    }
-  }
-}
-
-.chat-message-creator__chatable {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  flex-wrap: wrap;
-
-  &.-user .chat-user-display-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);
+    }
-      border-radius: 100%;
+
-      width: 24px;
+    &-container {
-      height: 22px;
+      display: flex;
+      flex-grow: 1;
+    }
+
+    &-input {
+      background: none !important;
+      margin: 0 !important;
+      border: 0 !important;
+      outline: 0 !important;
+      min-width: 200px;
+      flex-grow: 1;
+      padding-inline: 0 !important;
     }
   }
 
-  &.-category-channel .chat-channel-title__category-badge {
+  &__members-count {
-    display: flex;
+    white-space: nowrap;
-    justify-content: center;
+    color: var(--primary-medium);
-    width: 24px;
+
+    &.-reached-limit {
+      color: var(--danger);
+    }
   }
 
-  &.-disabled-chat {
+  &__add-members-footer {
-    padding-left: 0.25rem;
-  }
-
-  .unread-indicator {
-    margin-left: 0.5rem;
-    width: 8px;
-    height: 8px;
-    background: var(--tertiary);
-    border-radius: 100%;
-  }
-}
-
-.chat-message-creator__search-input {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--primary-400);
-  width: 100%;
-  box-sizing: border-box;
-  height: 42px;
-  padding: 0 0.5rem;
-
-  &:focus,
-  &:focus-within {
-    @include default-focus();
-  }
-
-  &-container {
     display: flex;
     flex-grow: 1;
+    justify-content: flex-end;
+    padding-top: 1rem;
+    border-top: 1px solid var(--primary-low);
+
+    &-container {
+      display: flex;
+    }
   }
 
-  &__search-icon {
+  &__list {
-    background: none !important;
+    list-style: none;
-    color: var(--primary-medium);
+    margin: 0;
+    gap: 0.25rem;
+    display: flex;
+    flex-direction: column;
+
+    [data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &-item {
+      box-sizing: border-box;
+      cursor: pointer;
+      padding: 0.5rem 1rem;
+      display: flex;
+      align-items: center;
+
+      .d-icon-users {
+        padding: 4px 4px;
+        box-sizing: border-box;
+        color: var(--tertiary);
+        background: var(--primary-low);
+        border-radius: 100%;
+        width: 24px;
+        height: 22px;
+      }
+
+      .btn {
+        padding: 0;
+      }
+
+      &.-highlighted {
+        background: var(--tertiary-very-low);
+      }
+    }
+
+    .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;
+        }
+      }
+    }
   }
 
-  &__input {
+  &__group-name {
-    width: 100% !important;
+    flex-shrink: 0;
   }
 
-  &__input,
+  &__chatable {
-  &__input:focus {
+    display: flex;
-    margin: 0 !important;
+    align-items: center;
-    border: 0 !important;
+    gap: 0.5em;
-    appearance: none !important;
+    width: 100%;
-    outline: none !important;
+    flex-wrap: wrap;
-    background: none !important;
+
-  }
+    .chat-user-display-name__name {
-}
+      color: var(--primary-high);
-
+      font-size: var(--font-down-1-rem);
-@keyframes popIn {
+    }
-  0% {
+
-    transform: scale(0.1);
+    &.-category-channel .chat-channel-title__category-badge {
-    opacity: 0;
+      display: flex;
-  }
+      justify-content: center;
-
+      width: 24px;
-  100% {
+    }
-    transform: scale(1);
+
-    opacity: 1;
+    .unread-indicator {
+      margin-left: 0.5rem;
+      width: 8px;
+      height: 8px;
+      background: var(--tertiary);
+      border-radius: 100%;
+    }
+  }
+
+  &__search-input {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--primary-400);
+    width: 100%;
+    box-sizing: border-box;
+    height: 42px;
+    padding: 0 0.5rem;
+
+    &:focus,
+    &:focus-within {
+      @include default-focus();
+    }
+
+    &-container {
+      display: flex;
+      flex-grow: 1;
+    }
+
+    &__search-icon {
+      background: none !important;
+      color: var(--primary-medium);
+    }
+
+    &__input {
+      width: 100% !important;
+    }
+
+    &__input,
+    &__input:focus {
+      margin: 0 !important;
+      border: 0 !important;
+      appearance: none !important;
+      outline: none !important;
+      background: none !important;
+    }
+  }
+
+  @keyframes popIn {
+    0% {
+      transform: scale(0.1);
+      opacity: 0;
+    }
+
+    100% {
+      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