Add reply placeholder to bottom of post stream

framework/core/js/forum/src/components/discussion-composer.js

@@ -10,7 +10,7 @@ import ActionButton from 'flarum/components/action-button';
  */
 export default class DiscussionComposer extends ComposerBody {
   constructor(props) {
-    props.placeholder = props.placeholder || 'Write a post...';
+    props.placeholder = props.placeholder || 'Write a Post...';
     props.submitLabel = props.submitLabel || 'Post Discussion';
     props.confirmExit = props.confirmExit || 'You have not posted your discussion. Do you wish to discard it?';
     props.titlePlaceholder = props.titlePlaceholder || 'Discussion Title';

framework/core/js/forum/src/components/post-stream.js

@@ -4,6 +4,7 @@ import PostLoading from 'flarum/components/post-loading';
 import anchorScroll from 'flarum/utils/anchor-scroll';
 import mixin from 'flarum/utils/mixin';
 import evented from 'flarum/utils/evented';
+import ReplyPlaceholder from 'flarum/components/reply-placeholder';
 
 class PostStream extends mixin(Component, evented) {
   constructor(props) {
@@ -170,7 +171,15 @@ class PostStream extends mixin(Component, evented) {
         }
 
         return m('div.item', attributes, content);
-      })
+      }),
+
+      // If we're viewing the end of the discussion, the user can reply, and
+      // is not already doing so, then show a 'write a reply' placeholder.
+      this.visibleEnd === this.count() &&
+        (!app.session.user() || this.discussion.canReply()) &&
+        !app.composingReplyTo(this.discussion)
+        ? m('div.item', ReplyPlaceholder.component({discussion: this.discussion}))
+        : ''
     );
   }
 
@@ -376,7 +385,9 @@ class PostStream extends mixin(Component, evented) {
         }
 
         if (top + height < scrollTop + viewportHeight) {
-          endNumber = $item.data('number');
+          if ($item.data('number')) {
+            endNumber = $item.data('number');
+          }
         } else {
           return false;
         }

framework/core/js/forum/src/components/reply-composer.js

@@ -6,7 +6,7 @@ import Composer from 'flarum/components/composer';
 
 export default class ReplyComposer extends ComposerBody {
   constructor(props) {
-    props.placeholder = props.placeholder || 'Write your reply...';
+    props.placeholder = props.placeholder || 'Write a Reply...';
     props.submitLabel = props.submitLabel || 'Post Reply';
     props.confirmExit = props.confirmExit || 'You have not posted your reply. Do you wish to discard it?';
 

framework/core/js/forum/src/components/reply-placeholder.js

@@ -0,0 +1,10 @@
+import Component from 'flarum/component';
+import avatar from 'flarum/helpers/avatar';
+
+export default class ReplyPlaceholder extends Component {
+  view() {
+    return m('article.post.reply-post', {onclick: () => this.props.discussion.replyAction(true)}, [
+      m('header.post-header', avatar(app.session.user()), 'Write a Reply...'),
+    ]);
+  }
+}

framework/core/less/forum/discussion.less

@@ -459,6 +459,23 @@
     font-size: 22px;
   }
 }
+.reply-post {
+  font-size: 15px;
+  cursor: text;
+  overflow: hidden;
+  margin: -15px;
+  padding: 15px 15px 15px 90px + 15px;
+
+  & .avatar {
+    opacity: 0.25;
+  }
+
+  &:hover {
+    border: 1px dashed @fl-body-secondary-color;
+    border-radius: 64px;
+    margin: -16px;
+  }
+}
 
 // ------------------------------------
 // Scrubber