Add a first empty state to the discussion list

js/forum/src/components/DiscussionList.js

@@ -2,6 +2,7 @@ import Component from 'flarum/Component';
 import DiscussionListItem from 'flarum/components/DiscussionListItem';
 import Button from 'flarum/components/Button';
 import LoadingIndicator from 'flarum/components/LoadingIndicator';
+import Placeholder from 'flarum/components/Placeholder';
 
 /**
  * The `DiscussionList` component displays a list of discussions.
@@ -53,6 +54,15 @@ export default class DiscussionList extends Component {
       });
     }
 
+    if (this.discussions.length == 0) {
+      const text = 'Looks like there are no discussions here. Why don\'t you create a new one?';
+      return (
+        <div className="DiscussionList">
+          {Placeholder.component({text})}
+        </div>
+      );
+    }
+
     return (
       <div className="DiscussionList">
         <ul className="DiscussionList-discussions">

js/lib/components/Placeholder.js

@@ -0,0 +1,19 @@
+import Component from 'flarum/Component';
+
+/**
+ * The `Placeholder` component displays a muted text with some call to action,
+ * usually used as an empty state.
+ *
+ * ### Props
+ *
+ * - `text`
+ */
+export default class Placeholder extends Component {
+  view() {
+    return (
+      <div className="Placeholder">
+        <p>{this.props.text}</p>
+      </div>
+    );
+  }
+}