fix: messages inconsistencies (#4174)

* fix: messages inconsistencies

* fix

* chore: message at the page

* fix: permission grid styling broken

* fix

extensions/messages/extend.php

@@ -51,7 +51,7 @@ return [
     (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())

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/DialogSection.tsx

@@ -42,11 +42,14 @@ export default class DialogSection<CustomAttrs extends IDialogStreamAttrs = IDia
         <div className="DialogSection-header">
           <Avatar user={recipient} />
           <div className="DialogSection-header-info">
-            {(recipient && (
-              <Link href={app.route.user(recipient!)}>
-                <h2>{username(recipient)}</h2>
-              </Link>
-            )) || <h2>{username(recipient)}</h2>}
+            <h2 className="DialogSection-header-info-title">
+              {(recipient && <Link href={app.route.user(recipient!)}>{username(recipient)}</Link>) || username(recipient)}
+              {recipient && recipient.canSendAnyMessage() ? null : (
+                <span className="DialogSection-header-info-helperText">
+                  {app.translator.trans('flarum-messages.forum.dialog_section.cannot_reply_text')}
+                </span>
+              )}
+            </h2>
             <div className="badges">{listItems(recipient?.badges().toArray() || [])}</div>
           </div>
           <div className="DialogSection-header-actions">{this.actionItems().toArray()}</div>

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/less/forum.less

@@ -232,6 +232,17 @@
   gap: 6px;
 }
 
+.DialogSection-header-info-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.DialogSection-header-info-helperText {
+  font-size: 0.8rem;
+  font-weight: normal;
+  color: var(--control-color);
+}
+
 .DialogSection-back {
   display: flex;
 

extensions/messages/locale/en.yml

@@ -22,6 +22,7 @@ flarum-messages:
 
     dialog_section:
       back_label: Go back
+      cannot_reply_text: This user cannot reply
       controls:
         details_button: Details
       controls_toggle_label: Dialog control actions
@@ -42,14 +43,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 +65,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}

extensions/tags/js/src/admin/addTagsPermissionScope.tsx

@@ -78,14 +78,14 @@ export default function () {
         'tag',
         <Dropdown
           className="Dropdown--restrictByTag"
-          buttonClassName="Button Button--text"
+          buttonClassName="Button Button--link"
           label={app.translator.trans('flarum-tags.admin.permissions.restrict_by_tag_heading')}
           icon="fas fa-plus"
           caretIcon={null}
         >
           {tags.map((tag) => (
-            <Button icon={true} onclick={() => tag.save({ isRestricted: true })}>
-              {[tagIcon(tag, { className: 'Button-icon' }), ' ', tag.name()]}
+            <Button icon={tagIcon(tag, { className: 'Button-icon' })} onclick={() => tag.save({ isRestricted: true })}>
+              {tag.name()}
             </Button>
           ))}
         </Dropdown>