Move status components inside individual containers. We still need to select

all statuses/accounts to assemble, but at least lists don't have to be
re-rendered all the time now. Also add "mention" dropdown option

2 files changed, 17 insertions, 9 deletions

diff --git a/app/assets/javascripts/components/features/account/components/action_bar.jsx b/app/assets/javascripts/components/features/account/components/action_bar.jsx
index 0f26b1e5a..195b143af 100644
--- a/app/assets/javascripts/components/features/account/components/action_bar.jsx
+++ b/app/assets/javascripts/components/features/account/components/action_bar.jsx
@@ -8,7 +8,8 @@ const ActionBar = React.createClass({
     account: ImmutablePropTypes.map.isRequired,
     me: React.PropTypes.number.isRequired,
     onFollow: React.PropTypes.func.isRequired,
-    onBlock: React.PropTypes.func.isRequired
+    onBlock: React.PropTypes.func.isRequired,
+    onMention: React.PropTypes.func.isRequired
   },
 
   mixins: [PureRenderMixin],
@@ -18,6 +19,8 @@ const ActionBar = React.createClass({
 
     let menu = [];
 
+    menu.push({ text: 'Mention', action: this.props.onMention });
+
     if (account.get('id') === me) {
       menu.push({ text: 'Edit profile', href: '/settings/profile' });
     } else if (account.getIn(['relationship', 'blocking'])) {
@@ -32,26 +35,26 @@ const ActionBar = React.createClass({
 
     return (
       <div style={{ borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', lineHeight: '36px', overflow: 'hidden', flex: '0 0 auto', display: 'flex' }}>
+        <div style={{ padding: '10px', flex: '1 1 auto' }}>
+          <DropdownMenu items={menu} icon='bars' size={24} />
+        </div>
+
         <div style={{ flex: '1 1 auto', display: 'flex', lineHeight: '18px' }}>
-          <div style={{ overflow: 'hidden', width: '80px', borderRight: '1px solid #363c4b', padding: '10px', paddingRight: '5px' }}>
+          <div style={{ overflow: 'hidden', width: '80px', borderLeft: '1px solid #363c4b', padding: '10px', paddingRight: '5px' }}>
             <span style={{ display: 'block', textTransform: 'uppercase', fontSize: '11px', color: '#616b86' }}>Posts</span>
             <span style={{ display: 'block', fontSize: '15px', fontWeight: '500', color: '#fff' }}>{account.get('statuses_count')}</span>
           </div>
 
-          <div style={{ overflow: 'hidden', width: '80px', borderRight: '1px solid #363c4b', padding: '10px 5px' }}>
+          <div style={{ overflow: 'hidden', width: '80px', borderLeft: '1px solid #363c4b', padding: '10px 5px' }}>
             <span style={{ display: 'block', textTransform: 'uppercase', fontSize: '11px', color: '#616b86' }}>Follows</span>
             <span style={{ display: 'block', fontSize: '15px', fontWeight: '500', color: '#fff' }}>{account.get('following_count')}</span>
           </div>
 
-          <div style={{ overflow: 'hidden', width: '80px', padding: '10px 5px', borderRight: '1px solid #363c4b' }}>
+          <div style={{ overflow: 'hidden', width: '80px', padding: '10px 5px', borderLeft: '1px solid #363c4b' }}>
             <span style={{ display: 'block', textTransform: 'uppercase', fontSize: '11px', color: '#616b86' }}>Followers</span>
             <span style={{ display: 'block', fontSize: '15px', fontWeight: '500', color: '#fff' }}>{account.get('followers_count')}</span>
           </div>
         </div>
-
-        <div style={{ padding: '10px', flex: '1 1 auto' }}>
-          <DropdownMenu items={menu} icon='bars' size={24} />
-        </div>
       </div>
     );
   },
diff --git a/app/assets/javascripts/components/features/account/index.jsx b/app/assets/javascripts/components/features/account/index.jsx
index 83770eb74..76d69f751 100644
--- a/app/assets/javascripts/components/features/account/index.jsx
+++ b/app/assets/javascripts/components/features/account/index.jsx
@@ -10,6 +10,7 @@ import {
   fetchAccountTimeline,
   expandAccountTimeline
 }                            from '../../actions/accounts';
+import { mentionCompose }    from '../../actions/compose';
 import Header                from './components/header';
 import {
   getAccountTimeline,
@@ -62,6 +63,10 @@ const Account = React.createClass({
     }
   },
 
+  handleMention () {
+    this.props.dispatch(mentionCompose(this.props.account));
+  },
+
   render () {
     const { account, me } = this.props;
 
@@ -78,7 +83,7 @@ const Account = React.createClass({
         <ColumnBackButton />
         <Header account={account} me={me} />
 
-        <ActionBar account={account} me={me} onFollow={this.handleFollow} onBlock={this.handleBlock} />
+        <ActionBar account={account} me={me} onFollow={this.handleFollow} onBlock={this.handleBlock} onMention={this.handleMention} />
 
         {this.props.children}
       </Column>