Adding sense of self to the UI, cleaning up routing, adding third (detail) column

app/assets/javascripts/components/components/column.jsx

@@ -5,7 +5,8 @@ const Column = React.createClass({
 
   propTypes: {
     heading: React.PropTypes.string,
-    icon: React.PropTypes.string
+    icon: React.PropTypes.string,
+    fluid: React.PropTypes.bool
   },
 
   mixins: [PureRenderMixin],
@@ -22,8 +23,16 @@ const Column = React.createClass({
       header = <ColumnHeader icon={this.props.icon} type={this.props.heading} onClick={this.handleHeaderClick} />;
     }
 
+    const style = { width: '350px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' };
+
+    if (this.props.fluid) {
+      style.width      = 'auto';
+      style.flex       = '1 1 auto';
+      style.background = '#21242d';
+    }
+
     return (
-      <div style={{ width: '380px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' }}>
+      <div style={style}>
         {header}
         {this.props.children}
       </div>

app/assets/javascripts/components/components/columns_area.jsx

@@ -6,7 +6,7 @@ const ColumnsArea = React.createClass({
 
   render () {
     return (
-      <div style={{ display: 'flex', flexDirection: 'row', flex: '1' }}>
+      <div style={{ display: 'flex', flexDirection: 'row', flex: '1', marginRight: '10px' }}>
         {this.props.children}
       </div>
     );

app/assets/javascripts/components/components/display_name.jsx

@@ -1,4 +1,5 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
 
 const DisplayName = React.createClass({
 
@@ -6,6 +7,8 @@ const DisplayName = React.createClass({
     account: ImmutablePropTypes.map.isRequired
   },
 
+  mixins: [PureRenderMixin],
+
   render () {
     let displayName = this.props.account.get('display_name');
 

app/assets/javascripts/components/components/frontend.jsx

@@ -1,12 +1,13 @@
-import ColumnsArea          from './columns_area';
-import Column               from './column';
-import Drawer               from './drawer';
+import ColumnsArea            from './columns_area';
+import Column                 from './column';
+import Drawer                 from './drawer';
 import ComposeFormContainer   from '../containers/compose_form_container';
 import FollowFormContainer    from '../containers/follow_form_container';
 import UploadFormContainer    from '../containers/upload_form_container';
 import StatusListContainer    from '../containers/status_list_container';
 import NotificationsContainer from '../containers/notifications_container';
-import PureRenderMixin        from 'react-addons-pure-render-mixin';
+import NavigationContainer    from '../containers/navigation_container';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 const Frontend = React.createClass({
 
@@ -17,6 +18,7 @@ const Frontend = React.createClass({
       <div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}>
         <Drawer>
           <div style={{ flex: '1 1 auto' }}>
+            <NavigationContainer />
             <ComposeFormContainer />
             <UploadFormContainer />
           </div>
@@ -32,6 +34,10 @@ const Frontend = React.createClass({
           <Column icon='at' heading='Mentions'>
             <StatusListContainer type='mentions' />
           </Column>
+
+          <Column fluid={true}>
+            {this.props.children}
+          </Column>
         </ColumnsArea>
 
         <NotificationsContainer />

app/assets/javascripts/components/components/navigation_bar.jsx

@@ -0,0 +1,30 @@
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Avatar             from './avatar';
+import IconButton         from './icon_button';
+import DisplayName        from './display_name';
+import { Link }           from 'react-router';
+
+const NavigationBar = React.createClass({
+  propTypes: {
+    account: ImmutablePropTypes.map.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  render () {
+    return (
+      <div style={{ padding: '10px', display: 'flex', cursor: 'default' }}>
+        <Avatar src={this.props.account.get('avatar')} size={40} />
+
+        <div style={{ flex: '1 1 auto', marginLeft: '8px' }}>
+          <strong style={{ fontWeight: '500', display: 'block' }}>{this.props.account.get('acct')}</strong>
+          <Link to='/settings' style={{ color: '#9baec8', textDecoration: 'none' }}>Settings <i className='fa fa fa-cog' /></Link>
+        </div>
+      </div>
+    );
+  }
+
+});
+
+export default NavigationBar;

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

@@ -5,11 +5,13 @@ import PureRenderMixin    from 'react-addons-pure-render-mixin';
 import IconButton         from './icon_button';
 import DisplayName        from './display_name';
 import MediaGallery       from './media_gallery';
+import { hashHistory }    from 'react-router';
 
 const Status = React.createClass({
 
   propTypes: {
     status: ImmutablePropTypes.map.isRequired,
+    wrapped: React.PropTypes.bool,
     onReply: React.PropTypes.func,
     onFavourite: React.PropTypes.func,
     onReblog: React.PropTypes.func
@@ -29,6 +31,10 @@ const Status = React.createClass({
     this.props.onReblog(this.props.status);
   },
 
+  handleClick () {
+    hashHistory.push(`/statuses/${this.props.status.get('id')}`);
+  },
+
   render () {
     var content = { __html: this.props.status.get('content') };
     var media   = '';
@@ -37,13 +43,13 @@ const Status = React.createClass({
 
     if (status.get('reblog') !== null) {
       return (
-        <div style={{ cursor: 'pointer' }}>
+        <div style={{ cursor: 'pointer' }} onClick={this.handleClick}>
           <div style={{ marginLeft: '68px', color: '#616b86', padding: '8px 0', paddingBottom: '2px', fontSize: '14px', position: 'relative' }}>
             <div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet'></i></div>
             <a href={status.getIn(['account', 'url'])} className='status__display-name'><strong style={{ color: '#616b86'}}>{status.getIn(['account', 'display_name'])}</strong></a> reblogged
           </div>
 
-          <Status {...other} status={status.get('reblog')} />
+          <Status {...other} wrapped={true} status={status.get('reblog')} />
         </div>
       );
     }
@@ -53,7 +59,7 @@ const Status = React.createClass({
     }
 
     return (
-      <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}>
+      <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }} onClick={this.handleClick}>
         <div style={{ fontSize: '15px' }}>
           <div style={{ float: 'right', fontSize: '14px' }}>
             <a href={status.get('url')} className='status__relative-time' style={{ color: '#616b86' }}><RelativeTimestamp timestamp={status.get('created_at')} /></a>

app/assets/javascripts/components/components/upload_button.jsx

@@ -27,7 +27,7 @@ const UploadButton = React.createClass({
           <i className='fa fa-fw fa-photo' /> Add images
         </Button>
 
-        <input ref='fileElement' type='file' onChange={this.handleChange} disabled={this.props.disabled} style={{ display: 'none' }} />
+        <input ref='fileElement' type='file' multiple={false} onChange={this.handleChange} disabled={this.props.disabled} style={{ display: 'none' }} />
       </div>
     );
   }