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');