Refactor Composer rendering for smoother animations

Also fixes a couple of miscellaneous bugs:
- Minimise the Composer when clicking the preview button in full-screen mode on desktop.
- Minimise the Composer when clicking the link to the discussion/post in the header on mobile/full-screen mode.

js/forum/src/components/ReplyComposer.js

@@ -4,6 +4,13 @@ import Button from 'flarum/components/Button';
 import icon from 'flarum/helpers/icon';
 import extractText from 'flarum/utils/extractText';
 
+function minimizeComposerIfFullScreen(e) {
+  if (app.composer.isFullScreen()) {
+    app.composer.minimize();
+    e.stopPropagation();
+  }
+}
+
 /**
  * The `ReplyComposer` component displays the composer content for replying to a
  * discussion.
@@ -17,14 +24,8 @@ export default class ReplyComposer extends ComposerBody {
   init() {
     super.init();
 
-    this.editor.props.preview = () => {
-      // If the composer backdrop is visible, assume we're on mobile and need to
-      // minimize the composer in order to see the preview. We do this as a
-      // timeout so that it occurs after the click handler on the composer
-      // itself that shows the composer if minimized.
-      if (app.composer.isMobile()) {
-        setTimeout(() => app.composer.minimize(), 0);
-      }
+    this.editor.props.preview = e => {
+      minimizeComposerIfFullScreen(e);
 
       m.route(app.route.discussion(this.props.discussion, 'reply'));
     };
@@ -42,10 +43,16 @@ export default class ReplyComposer extends ComposerBody {
     const items = super.headerItems();
     const discussion = this.props.discussion;
 
+    const routeAndMinimize = function(element, isInitialized) {
+      if (isInitialized) return;
+      $(element).on('click', minimizeComposerIfFullScreen);
+      m.route.apply(this, arguments);
+    };
+
     items.add('title', (
       <h3>
         {icon('reply')} {' '}
-        <a href={app.route.discussion(discussion)} config={m.route}>{discussion.title()}</a>
+        <a href={app.route.discussion(discussion)} config={routeAndMinimize}>{discussion.title()}</a>
       </h3>
     ));