show pinned comments on the top of threads

web/app/components/root/__pinned-comment/root__pinned-comment.scss

@@ -0,0 +1,5 @@
+.root__pinned-comment {
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

web/app/components/root/__pinned-comments/root__pinned-comments.scss

@@ -0,0 +1,8 @@
+@import 'common/variables';
+
+.root__pinned-comments {
+  margin-bottom: $offset * 2;
+  padding: ($offset / 3) ($offset / 2);
+  border: 3px solid #0aa;
+  border-radius: 4px;
+}

web/app/components/root/index.js

@@ -1,6 +1,8 @@
 export { default } from './root';
 
 require('./__input/root__input.scss');
+require('./__pinned-comment/root__pinned-comment.scss');
+require('./__pinned-comments/root__pinned-comments.scss');
 require('./__thread/root__thread.scss');
 
 require('./_loading/root_loading.scss');

web/app/components/root/root.jsx

@@ -4,6 +4,7 @@ import api from 'common/api';
 import { url, id } from 'common/settings';
 import store from 'common/store';
 
+import Comment from 'components/comment';
 import Input from 'components/input';
 import Thread from 'components/thread';
 
@@ -51,11 +52,30 @@ export default class Root extends Component {
       );
     }
 
+    // TODO: i think we should do it on backend
+    const pinnedComments = store.getPinnedComments();
+
     return (
       <div id={id}>
         <div className="root root__loading" id={id}>
           <Input mix="root__input" onSubmit={this.addComment}/>
 
+          {
+            !!pinnedComments.length && (
+              <div className="root__pinned-comments">
+                {
+                  pinnedComments.map(comment => (
+                    <Comment
+                      data={comment}
+                      mods={{ level: 0, pinned: true }}
+                      mix="root__pinned-comment"
+                    />
+                  ))
+                }
+              </div>
+            )
+          }
+
           {
             comments.map(thread => (
               <Thread