move collapse button to the top right corner; change design of collapsed comment

closes #37 and #53

web/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss

@@ -1,5 +1,8 @@
 .comment__action_type_collapse {
   display: inline-block;
+  position: absolute;
+  top: 6px;
+  right: 68px;
   box-sizing: border-box;
   width: 12px;
   height: 12px;

web/app/components/comment/__info/comment__info.scss

@@ -1,6 +1,6 @@
 .comment__info {
   margin-bottom: 6px;
-  padding-right: 64px;
+  padding-right: 84px;
   font-size: 14px;
   line-height: 16px;
 }

web/app/components/comment/_collapsed/comment_collapsed.scss

@@ -0,0 +1,5 @@
+.comment_collapsed {
+  .comment__text, .comment__actions {
+    display: none;
+  }
+}

web/app/components/comment/comment.jsx

@@ -262,6 +262,11 @@ export default class Comment extends Component {
   }
 
   toggleCollapse() {
+    this.setState({
+      isEditing: false,
+      isReplying: false,
+    });
+
     if (this.props.onCollapseToggle) {
       this.props.onCollapseToggle();
     }
@@ -385,6 +390,16 @@ export default class Comment extends Component {
               )
             }
 
+            {
+              !mods.disabled && (
+                <span
+                  className={b('comment__action', {}, { type: 'collapse', selected: mods.collapsed })}
+                  tabIndex="0"
+                  onClick={this.toggleCollapse}
+                >{mods.collapsed ? '+' : '−'}</span>
+              )
+            }
+
             <span className={b('comment__score', {}, { view: o.score.view })}>
               <span
                 className={b('comment__vote', {}, { type: 'up', selected: scoreIncreased, disabled: isGuest || isCurrentUser })}
@@ -439,16 +454,6 @@ export default class Comment extends Component {
               )
             }
 
-            {
-              !mods.disabled && mods.collapsible && (
-                <span
-                  className={b('comment__action', {}, { type: 'collapse', selected: mods.collapsed })}
-                  tabIndex="0"
-                  onClick={this.toggleCollapse}
-                >{mods.collapsed ? '+' : '−'}</span>
-              )
-            }
-
             {
               !deleted && isAdmin && (
                 <span className="comment__controls">

web/app/components/comment/index.js

@@ -34,8 +34,9 @@ require('./__vote/_selected/comment__vote_selected.scss');
 require('./__vote/_type/_down/comment__vote_type_down.scss');
 require('./__vote/_type/_up/comment__vote_type_up.scss');
 
-require('./_level/comment_level.scss');
+require('./_collapsed/comment_collapsed.scss');
 require('./_editing/comment_editing.scss');
+require('./_level/comment_level.scss');
 require('./_replying/comment_replying.scss');
 require('./_useless/comment_useless.scss');
 

web/app/components/thread/thread.jsx

@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
 
 import { LS_COLLAPSE_KEY } from 'common/constants';
 import { siteId, url } from 'common/settings';
+import store from 'common/store';
 
 import Comment from 'components/comment';
 
@@ -23,10 +24,15 @@ export default class Thread extends Component {
   }
 
   updateCollapsedState(comment) {
+    const config = store.get('config') || {};
+    const score = comment.score || 0;
+
     this.lsCollapsedID = `${siteId}_${url}_${comment.id}`;
 
     this.state = {
-      collapsed: getCollapsedComments().includes(this.lsCollapsedID),
+      collapsed: !this.state.isCollapsedChanged && score <= config.critical_score
+                 || getCollapsedComments().includes(this.lsCollapsedID),
+      isCollapsedChanged: true,
     };
   }
 
@@ -49,7 +55,7 @@ export default class Thread extends Component {
   }
 
   render(props, { collapsed }) {
-    const { data: { comment, replies = [] }, mix, mods = {} } = props;
+    const { data: { comment, replies = [] }, mods = {} } = props;
 
     return (
       <div
@@ -59,7 +65,7 @@ export default class Thread extends Component {
       >
         <Comment
           data={comment}
-          mods={{ level: mods.level, collapsed, collapsible: !!replies.length }}
+          mods={{ level: mods.level, collapsed }}
           onReply={props.onReply}
           onEdit={props.onEdit}
           onCollapseToggle={this.onCollapseToggle}