fix: messages inconsistencies

Author: SychO9

extensions/messages/extend.php

@@ -51,7 +51,7 @@
     (new Extend\ApiResource(Resource\UserResource::class))
         ->fields(fn () => [
             Schema\Boolean::make('canSendAnyMessage')
-                ->get(fn (object $model, Context $context) => $context->getActor()->can('sendAnyMessage')),
+                ->get(fn (User $user, Context $context) => $user->can('sendAnyMessage')),
             Schema\Integer::make('messageCount')
                 ->get(function (object $model, Context $context) {
                     return Dialog::whereVisibleTo($context->getActor())

…nsions/messages/js/src/@types/shims.d.ts extensions/messages/js/@types/shims.d.tsextensions/messages/js/src/@types/shims.d.ts renamed to extensions/messages/js/@types/shims.d.ts extensions/messages/js/src/@types/shims.d.ts renamed to extensions/messages/js/@types/shims.d.ts

@@ -19,3 +19,9 @@ declare module 'flarum/forum/states/ComposerState' {
     composingMessageTo(dialog: Dialog): boolean;
   }
 }
+
+declare module 'flarum/common/models/User' {
+  export default interface User {
+    canSendAnyMessage(): boolean;
+  }
+}

extensions/messages/js/src/common/extend.ts

@@ -1,9 +1,13 @@
 import DialogMessage from './models/DialogMessage';
 import Dialog from './models/Dialog';
 import Extend from 'flarum/common/extenders';
+import User from 'flarum/common/models/User';
 
 export default [
   new Extend.Store()
     .add('dialogs', Dialog) //
     .add('dialog-messages', DialogMessage), //
+
+  new Extend.Model(User) //
+    .attribute<boolean>('canSendAnyMessage'),
 ];

extensions/messages/js/src/forum/components/MessageStream.tsx

@@ -106,9 +106,9 @@ export default class MessageStream<CustomAttrs extends IDialogStreamAttrs = IDia
 
     messages.forEach((message, index) => items.push(this.messageItem(message, index)));
 
-    if (ReplyPlaceholder) {
+    if (app.session.user!.canSendAnyMessage() && ReplyPlaceholder) {
       items.push(
-        <div className="MessageStream-item" key="reply" /*data-index={this.attrs.state.count()}*/>
+        <div className="MessageStream-item" key="reply">
           <ReplyPlaceholder
             discussion={this.attrs.dialog}
             onclick={() => {

extensions/messages/js/src/forum/components/MessagesSidebar.tsx

@@ -14,8 +14,6 @@ export default class MessagesSidebar<CustomAttrs extends IMessagesSidebarAttrs =
   items(): ItemList<Mithril.Children> {
     const items = super.items();
 
-    const canSendAnyMessage = app.session.user!.attribute<boolean>('canSendAnyMessage');
-
     items.remove('newDiscussion');
 
     items.add(
@@ -27,9 +25,11 @@ export default class MessagesSidebar<CustomAttrs extends IMessagesSidebarAttrs =
         onclick={() => {
           return this.newMessageAction();
         }}
-        disabled={!canSendAnyMessage}
+        disabled={!app.session.user!.canSendAnyMessage()}
       >
-        {app.translator.trans('flarum-messages.forum.messages_page.new_message_button')}
+        {app.session.user!.canSendAnyMessage()
+          ? app.translator.trans('flarum-messages.forum.messages_page.send_message_button')
+          : app.translator.trans('flarum-messages.forum.messages_page.cannot_send_message_button')}
       </Button>,
       10
     );

extensions/messages/js/src/forum/index.tsx

@@ -8,6 +8,7 @@ import Button from 'flarum/common/components/Button';
 import type Dialog from '../common/models/Dialog';
 import DialogsDropdown from './components/DialogsDropdown';
 import DialogListState from './states/DialogListState';
+import type User from 'flarum/common/models/User';
 
 export { default as extend } from './extend';
 
@@ -44,14 +45,14 @@ app.initializers.add('flarum-messages', () => {
   });
 
   extend(HeaderSecondary.prototype, 'items', function (items) {
-    if (app.session.user?.attribute<boolean>('canSendAnyMessage')) {
+    if (app.session.user?.canSendAnyMessage()) {
       items.add('messages', <DialogsDropdown state={app.dropdownDialogs} />, 15);
     }
   });
 
   // @ts-ignore
-  extend(UserControls, 'userControls', (items, user) => {
-    if (app.session.user?.attribute<boolean>('canSendAnyMessage')) {
+  extend(UserControls, 'userControls', (items, user: User) => {
+    if (app.session.user?.canSendAnyMessage()) {
       items.add(
         'sendMessage',
         <Button
@@ -66,6 +67,7 @@ app.initializers.add('flarum-messages', () => {
                 .then(() => app.composer.show());
             });
           }}
+          helperText={user.canSendAnyMessage() ? null : app.translator.trans('flarum-messages.forum.user_controls.cannot_reply_text')}
         >
           {app.translator.trans('flarum-messages.forum.user_controls.send_message_button')}
         </Button>

extensions/messages/locale/en.yml

@@ -42,14 +42,14 @@ flarum-messages:
       oldest_button: Oldest
 
     messages_page:
-      empty_text: You have no messages yet. When you send or receive messages, they
-        will appear here.
+      cannot_send_message_button: Can't Send a Message
+      empty_text: No new messages
       hero:
         title: Messages
         subtitle: Your private conversations with other users
       mark_all_as_read_tooltip: Mark all as read
-      new_message_button: Send a Message
       refresh_tooltip: Refresh
+      send_message_button: Send a Message
       stream:
         load_previous_button: Load previous messages
         start_of_the_conversation: Start of the conversation
@@ -64,6 +64,7 @@ flarum-messages:
 
     user_controls:
       send_message_button: Send a message
+      cannot_reply_text: This user cannot reply
 
     notifications:
       message_received_text: Message Received notification from {user}

framework/core/js/src/common/components/Button.tsx

@@ -42,6 +42,11 @@ export interface IButtonAttrs extends ComponentAttrs {
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type
    */
   type?: string;
+  /**
+   * Helper text. Displayed under the button label.
+   *
+   * Default: `null`
+   */
 }
 
 /**
@@ -56,7 +61,7 @@ export interface IButtonAttrs extends ComponentAttrs {
  */
 export default class Button<CustomAttrs extends IButtonAttrs = IButtonAttrs> extends Component<CustomAttrs> {
   view(vnode: Mithril.VnodeDOM<CustomAttrs, this>) {
-    let { type, 'aria-label': ariaLabel, icon: iconName, disabled, loading, className, class: _class, ...attrs } = this.attrs;
+    let { type, 'aria-label': ariaLabel, icon: iconName, disabled, loading, className, class: _class, helperText, ...attrs } = this.attrs;
 
     // If no `type` attr provided, set to "button"
     type ||= 'button';
@@ -108,8 +113,17 @@ export default class Button<CustomAttrs extends IButtonAttrs = IButtonAttrs> ext
 
     return [
       iconName && <Icon name={iconName} className="Button-icon" />,
-      children && <span className="Button-label">{children}</span>,
+      children && (
+        <span className="Button-label">
+          <span className="Button-labelText">{children}</span>
+          {this.getButtonSubContent()}
+        </span>
+      ),
       this.attrs.loading && <LoadingIndicator size="small" display="inline" />,
     ];
   }
+
+  protected getButtonSubContent(): Mithril.Children {
+    return this.attrs.helperText ? <span className="Button-helperText">{this.attrs.helperText}</span> : null;
+  }
 }

framework/core/js/src/common/components/Dropdown.tsx

@@ -19,6 +19,8 @@ export interface IDropdownAttrs extends ComponentAttrs {
   caretIcon?: string;
   /** The label of the dropdown toggle button. Defaults to 'Controls'. */
   label: Mithril.Children;
+  /** The helper text to display under the button label. */
+  helperText: Mithril.Children;
   /** The label used to describe the dropdown toggle button to assistive readers. Defaults to 'Toggle dropdown menu'. */
   accessibleToggleLabel?: string;
   /** An optional tooltip to show when hovering over the dropdown toggle button. */
@@ -157,11 +159,18 @@ export default class Dropdown<CustomAttrs extends IDropdownAttrs = IDropdownAttr
   getButtonContent(children: Mithril.ChildArray): Mithril.ChildArray {
     return [
       this.attrs.icon ? <Icon name={this.attrs.icon} className="Button-icon" /> : '',
-      <span className="Button-label">{this.attrs.label}</span>,
+      <span className="Button-label">
+        <span className="Button-labelText">{this.attrs.label}</span>
+        {this.getButtonSubContent()}
+      </span>,
       this.attrs.caretIcon ? <Icon name={this.attrs.caretIcon} className="Button-caret" /> : '',
     ];
   }
 
+  protected getButtonSubContent(): Mithril.Children {
+    return this.attrs.helperText ? <span className="Button-helperText">{this.attrs.helperText}</span> : null;
+  }
+
   getMenu(items: Mithril.Vnode<any, any>[]): Mithril.Vnode<any, any> {
     return <ul className={'Dropdown-menu dropdown-menu ' + this.attrs.menuClassName}>{items}</ul>;
   }

framework/core/less/common/Button.less

@@ -259,6 +259,12 @@
   line-height: inherit;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: flex;
+  flex-direction: column;
+}
+.Button-helperText {
+  font-size: 0.73rem;
+  color: var(--muted-more-color);
 }
 .Button-icon {
   line-height: inherit;