show pinned comments on the top of threads

web/app/components/comment/__vote/_selected/comment__vote_selected.scss

@@ -1,4 +1,4 @@
 .comment__vote_selected {
-  border-top-color: #00aaaa;
+  border-top-color: #0aa;
   cursor: default;
 }

web/app/components/comment/__vote/comment__vote.scss

@@ -8,6 +8,6 @@
   cursor: pointer;
 
   &:hover {
-    border-top-color: #00aaaa;
+    border-top-color: #0aa;
   }
 }

web/app/components/comment/_marked/comment_marked.scss

@@ -0,0 +1,9 @@
+@import 'common/variables';
+
+.comment_marked {
+  &, &.comment_view_admin {
+    .comment__username {
+      font-weight: 700;
+    }
+  }
+}

web/app/components/comment/_pinned/comment_pinned.scss

@@ -1,7 +0,0 @@
-.comment_pinned {
-  &, &.comment_view_admin {
-    .comment__username {
-      color: #FFD700;
-    }
-  }
-}

web/app/components/comment/comment.jsx

@@ -65,7 +65,7 @@ export default class Comment extends Component {
 
     this.setState({ pinned: false });
 
-    api.pin({ id, url }).then(() => {
+    api.unpin({ id, url }).then(() => {
       api.getComment({ id }).then(comment => store.replaceComment(comment));
     });
   }
@@ -144,6 +144,7 @@ export default class Comment extends Component {
     // TODO: add smth that will count 'hours ago' (mb this: https://github.com/catamphetamine/javascript-time-ago)
     // TODO: check out stash's impl;
     // TODO: don't forget about optional locales, m?
+    // TODO: also date must be a link to the comment
     const timeStr = `${time.toLocaleDateString([], { month: 'short', day: 'numeric' })}, ${time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
     const o = {
       ...data,
@@ -155,7 +156,7 @@ export default class Comment extends Component {
     };
 
     const defaultMods = {
-      pinned,
+      marked: mods.pinned ? null : pinned,
       // TODO: add default view mod or don't?
       view: o.user.admin ? 'admin' : null,
     };
@@ -184,9 +185,13 @@ export default class Comment extends Component {
 
               <span className="comment__time">{o.time}</span>
 
-              <span className="comment__controls">
-                <span className="comment__action" onClick={this.onReplyClick}>reply</span>
-              </span>
+              {
+                !mods.pinned && (
+                  <span className="comment__controls">
+                    <span className="comment__action" onClick={this.onReplyClick}>reply</span>
+                  </span>
+                )
+              }
 
               {
                 isAdmin &&

web/app/components/comment/index.js

@@ -25,6 +25,6 @@ require('./__vote/_type/_up/comment__vote_type_up.scss');
 
 require('./_level/comment_level.scss');
 
-require('./_pinned/comment_pinned.scss');
+require('./_marked/comment_marked.scss');
 
 require('./_view/_admin/comment_view_admin.scss');

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