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

app/assets/javascripts/components/components/status_action_bar.jsx

@@ -9,7 +9,8 @@ const StatusActionBar = React.createClass({
     onReply: React.PropTypes.func,
     onFavourite: React.PropTypes.func,
     onReblog: React.PropTypes.func,
-    onDelete: React.PropTypes.func
+    onDelete: React.PropTypes.func,
+    onMention: React.PropTypes.func
   },
 
   mixins: [PureRenderMixin],
@@ -30,12 +31,18 @@ const StatusActionBar = React.createClass({
     this.props.onDelete(this.props.status);
   },
 
+  handleMentionClick () {
+    this.props.onMention(this.props.status.get('account'));
+  },
+
   render () {
     const { status, me } = this.props;
     let menu = [];
 
     if (status.getIn(['account', 'id']) === me) {
       menu.push({ text: 'Delete', action: this.handleDeleteClick });
+    } else {
+      menu.push({ text: 'Mention', action: this.handleMentionClick });
     }
 
     return (

app/assets/javascripts/components/components/status_list.jsx

@@ -2,18 +2,14 @@ import Status              from './status';
 import ImmutablePropTypes  from 'react-immutable-proptypes';
 import PureRenderMixin     from 'react-addons-pure-render-mixin';
 import { ScrollContainer } from 'react-router-scroll';
+import StatusContainer     from '../containers/status_container';
 
 const StatusList = React.createClass({
 
   propTypes: {
-    statuses: ImmutablePropTypes.list.isRequired,
-    onReply: React.PropTypes.func,
-    onReblog: React.PropTypes.func,
-    onFavourite: React.PropTypes.func,
-    onDelete: React.PropTypes.func,
+    statusIds: ImmutablePropTypes.list.isRequired,
     onScrollToBottom: React.PropTypes.func,
-    trackScroll: React.PropTypes.bool,
-    me: React.PropTypes.number
+    trackScroll: React.PropTypes.bool
   },
 
   getDefaultProps () {
@@ -33,13 +29,13 @@ const StatusList = React.createClass({
   },
 
   render () {
-    const { statuses, onScrollToBottom, trackScroll, ...other } = this.props;
+    const { statusIds, onScrollToBottom, trackScroll } = this.props;
 
     const scrollableArea = (
       <div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable' onScroll={this.handleScroll}>
         <div>
-          {statuses.map((status) => {
-            return <Status key={status.get('id')} {...other} status={status} />;
+          {statusIds.map((statusId) => {
+            return <StatusContainer key={statusId} id={statusId} />;
           })}
         </div>
       </div>