Adding notifications column

app/assets/javascripts/components/components/account.jsx

@@ -0,0 +1,99 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Avatar from './avatar';
+import DisplayName from './display_name';
+import { Link } from 'react-router';
+import IconButton from './icon_button';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  follow: { id: 'account.follow', defaultMessage: 'Follow' }
+});
+
+const outerStyle = {
+  padding: '10px',
+  borderBottom: '1px solid #363c4b'
+};
+
+const itemStyle = {
+  flex: '1 1 auto',
+  display: 'block',
+  color: '#9baec8',
+  overflow: 'hidden',
+  textDecoration: 'none',
+  fontSize: '14px'
+};
+
+const noteStyle = {
+  paddingTop: '5px',
+  fontSize: '12px',
+  color: '#616b86'
+};
+
+const buttonsStyle = {
+  padding: '10px'
+};
+
+const Account = React.createClass({
+
+  propTypes: {
+    account: ImmutablePropTypes.map.isRequired,
+    me: React.PropTypes.number.isRequired,
+    onFollow: React.PropTypes.func.isRequired,
+    withNote: React.PropTypes.bool
+  },
+
+  getDefaultProps () {
+    return {
+      withNote: true
+    };
+  },
+
+  mixins: [PureRenderMixin],
+
+  handleFollow () {
+    this.props.onFollow(this.props.account);
+  },
+
+  render () {
+    const { account, me, withNote, intl } = this.props;
+
+    if (!account) {
+      return <div />;
+    }
+
+    let note, buttons;
+
+    if (account.get('note').length > 0 && withNote) {
+      note = <div style={noteStyle}>{account.get('note')}</div>;
+    }
+
+    if (account.get('id') !== me) {
+      const following = account.getIn(['relationship', 'following']);
+
+      buttons = (
+        <div style={buttonsStyle}>
+          <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(messages.follow)} onClick={this.handleFollow} active={following} />
+        </div>
+      );
+    }
+
+    return (
+      <div style={outerStyle}>
+        <div style={{ display: 'flex' }}>
+          <Link key={account.get('id')} style={itemStyle} className='account__display-name' to={`/accounts/${account.get('id')}`}>
+            <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div>
+            <DisplayName account={account} />
+          </Link>
+
+          {buttons}
+        </div>
+
+        {note}
+      </div>
+    );
+  }
+
+});
+
+export default injectIntl(Account);

app/assets/javascripts/components/components/status.jsx

@@ -11,6 +11,15 @@ import { FormattedMessage } from 'react-intl';
 import emojify from '../emoji';
 import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser';
 
+const outerStyle = {
+  padding: '8px 10px',
+  paddingLeft: '68px',
+  position: 'relative',
+  minHeight: '48px',
+  borderBottom: '1px solid #363c4b',
+  cursor: 'default'
+};
+
 const Status = React.createClass({
 
   contextTypes: {
@@ -26,7 +35,7 @@ const Status = React.createClass({
     onDelete: React.PropTypes.func,
     onOpenMedia: React.PropTypes.func,
     me: React.PropTypes.number,
-    now: React.PropTypes.any
+    muted: React.PropTypes.bool
   },
 
   mixins: [PureRenderMixin],
@@ -81,14 +90,14 @@ const Status = React.createClass({
     }
 
     return (
-      <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'default' }}>
+      <div className={this.props.muted ? 'muted' : ''} style={outerStyle}>
         <div style={{ fontSize: '15px' }}>
           <div style={{ float: 'right', fontSize: '14px' }}>
             <a href={status.get('url')} className='status__relative-time' style={{ color: '#616b86' }} target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} now={now} /></a>
           </div>
 
           <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#616b86' }}>
-            <div style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
+            <div className='status__avatar' style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
               <Avatar src={status.getIn(['account', 'avatar'])} size={48} />
             </div>