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>
+    );
+  }
+}

less/lib/Placeholder.less

@@ -0,0 +1,9 @@
+.Placeholder {
+  margin-top: 40px;
+
+  p {
+    font-size: 1.4em;
+    color: @muted-more-color;
+    text-align: center;
+  }
+}

less/lib/lib.less

@@ -22,6 +22,7 @@
 @import "LoadingIndicator.less";
 @import "Modal.less";
 @import "Navigation.less";
+@import "Placeholder.less";
 @import "Search.less";
 @import "Select.less";
 @import "Tooltip.less";