fix: messages UI/UX improvement (#4173)

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

@@ -59,6 +59,13 @@ export default class DialogSection<CustomAttrs extends IDialogStreamAttrs = IDia
   actionItems() {
     const items = new ItemList<Mithril.Children>();
 
+    items.add(
+      'back',
+      <Button className="Button Button--icon DialogSection-back" icon="fas fa-arrow-left" onclick={this.attrs.onback}>
+        {app.translator.trans('flarum-messages.forum.dialog_section.back_label')}
+      </Button>
+    );
+
     items.add(
       'details',
       <Dropdown

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

@@ -97,7 +97,7 @@ export default abstract class Message<CustomAttrs extends IMessageAttrs = IMessa
   }
 
   avatar(): Mithril.Children {
-    return this.attrs.message.user() ? <Avatar user={this.attrs.message.user()} /> : '';
+    return this.attrs.message.user() ? <Avatar user={this.attrs.message.user()} className="Post-avatar" /> : '';
   }
 
   headerItems() {

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

@@ -14,11 +14,13 @@ import listItems from 'flarum/common/helpers/listItems';
 import ItemList from 'flarum/common/utils/ItemList';
 import Dropdown from 'flarum/common/components/Dropdown';
 import Button from 'flarum/common/components/Button';
+import classList from 'flarum/common/utils/classList';
 
 export interface IMessagesPageAttrs extends IPageAttrs {}
 
 export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMessagesPageAttrs> extends Page<CustomAttrs> {
   protected selectedDialog = Stream<Dialog | null>(null);
+  protected currentDialogId: string | null = null;
 
   oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
     super.oninit(vnode);
@@ -49,6 +51,7 @@ export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMess
 
   protected async initDialog() {
     const dialogId = m.route.param('id');
+    this.currentDialogId = dialogId;
 
     const title = app.translator.trans('flarum-messages.forum.messages_page.title', {}, true);
 
@@ -94,7 +97,11 @@ export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMess
         ) : !app.dialogs.hasItems() ? (
           <InfoTile icon="far fa-envelope-open">{app.translator.trans('flarum-messages.forum.messages_page.empty_text')}</InfoTile>
         ) : (
-          <div className="MessagesPage-content">
+          <div
+            className={classList('MessagesPage-content', {
+              'MessagesPage-content--onDialog': this.currentDialogId,
+            })}
+          >
             <div className="MessagesPage-sidebar" key="sidebar">
               <div className="IndexPage-toolbar" key="toolbar">
                 <ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
@@ -103,7 +110,13 @@ export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMess
               <DialogList key="list" state={app.dialogs} activeDialog={this.selectedDialog()} />
             </div>
             {this.selectedDialog() ? (
-              <DialogSection key="dialog" dialog={this.selectedDialog()} />
+              <DialogSection
+                key="dialog"
+                dialog={this.selectedDialog()}
+                onback={() => {
+                  this.currentDialogId = null;
+                }}
+              />
             ) : (
               <LoadingIndicator key="loading" display="block" />
             )}

extensions/messages/less/forum.less

@@ -1,17 +1,68 @@
-.MessagesPage-sidebar {
-  flex-shrink: 0;
-  width: 280px;
+.MessagesPage {
+  padding-bottom: 0;
 }
 
 .MessagesPage-content {
+  --messages-page-gap: 32px;
   display: flex;
-  gap: 32px;
+  gap: var(--messages-page-gap);
 
   .Avatar {
     --size: 40px;
   }
 }
 
+.MessagesPage-sidebar {
+  flex-shrink: 0;
+  width: 100%;
+
+  .MessagesPage-content--onDialog & {
+    // margin-inline-start: calc(~"0px - 100% - var(--messages-page-gap)");
+    display: none;
+  }
+
+  @media @tablet-up {
+    width: 280px;
+
+    .MessagesPage-content--onDialog & {
+      // margin-inline-start: 0;
+      display: block;
+    }
+  }
+}
+
+.DialogSection {
+  flex-grow: 1;
+  min-width: 0;
+
+  @media @tablet-up {
+    padding-inline-start: 32px;
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--control-bg);
+
+    a {
+      color: var(--text-color);
+    }
+
+    &-actions {
+      margin-inline-start: auto;
+    }
+
+    &-info {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+}
+
 .MessageComposer-recipients {
   display: flex;
   align-items: center;
@@ -145,34 +196,6 @@
   }
 }
 
-.DialogSection {
-  flex-grow: 1;
-  padding-inline-start: 32px;
-
-  &-header {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    margin-bottom: 16px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid var(--control-bg);
-
-    a {
-      color: var(--text-color);
-    }
-
-    &-actions {
-      margin-inline-start: auto;
-    }
-
-    &-info {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-  }
-}
-
 .Message {
   padding-right: 0;
 
@@ -191,8 +214,30 @@
 }
 
 .MessageStream, .DialogList {
-  max-height: calc(100vh - var(--header-height) - 140px - 235px);
+  --additional-gap: 52px;
+  max-height: calc(100vh - var(--header-height) - 140px - var(--additional-gap));
   overflow: auto;
+
+  @media @tablet-up {
+    --additional-gap: 235px;
+  }
+}
+
+.MessageStream .ReplyPlaceholder {
+  margin-bottom: 24px;
+}
+
+.DialogSection-header-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.DialogSection-back {
+  display: flex;
+
+  @media @tablet-up {
+    display: none;
+  }
 }
 
 .DialogList-loadMore {

extensions/messages/locale/en.yml

@@ -21,6 +21,7 @@ flarum-messages:
       view_all: View all messages
 
     dialog_section:
+      back_label: Go back
       controls:
         details_button: Details
       controls_toggle_label: Dialog control actions