Fix responsive layout breakpoint, replace mentions column with notifications

app/assets/javascripts/components/features/notifications/index.jsx

@@ -22,7 +22,8 @@ const Notifications = React.createClass({
 
   propTypes: {
     notifications: ImmutablePropTypes.list.isRequired,
-    dispatch: React.PropTypes.func.isRequired
+    dispatch: React.PropTypes.func.isRequired,
+    trackScroll: React.PropTypes.bool
   },
 
   mixins: [PureRenderMixin],
@@ -41,19 +42,31 @@ const Notifications = React.createClass({
   },
 
   render () {
-    const { intl, notifications } = this.props;
+    const { intl, notifications, trackScroll } = this.props;
-
+
-    return (
+    const scrollableArea = (
-      <Column icon='bell' heading={intl.formatMessage(messages.title)}>
+      <div className='scrollable' onScroll={this.handleScroll}>
-        <ScrollContainer scrollKey='notifications'>
+        <div>
-          <div className='scrollable' onScroll={this.handleScroll}>
+          {notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
-            <div>
+        </div>
-              {notifications.map(item => <NotificationContainer key={item.get('id')} notification={item} accountId={item.get('account')} />)}
+      </div>
-            </div>
-          </div>
-        </ScrollContainer>
-      </Column>
     );
+
+    if (trackScroll) {
+      return (
+        <Column icon='bell' heading={intl.formatMessage(messages.title)}>
+          <ScrollContainer scrollKey='notifications'>
+            {scrollableArea}
+          </ScrollContainer>
+        </Column>
+      );
+    } else {
+      return (
+        <Column icon='bell' heading={intl.formatMessage(messages.title)}>
+          {scrollableArea}
+        </Column>
+      );
+    }
   }
 
 });

app/assets/javascripts/components/features/ui/components/tabs_bar.jsx

@@ -31,7 +31,7 @@ const TabsBar = () => {
     <div style={outerStyle}>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/statuses/new'><i className='fa fa-fw fa-pencil' /> <FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></Link>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/home'><i className='fa fa-fw fa-home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></Link>
-      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/mentions'><i className='fa fa-fw fa-at' /> <FormattedMessage id='tabs_bar.mentions' defaultMessage='Mentions' /></Link>
+      <Link style={tabStyle} activeStyle={tabActiveStyle} to='/notifications'><i className='fa fa-fw fa-bell' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></Link>
       <Link style={tabStyle} activeStyle={tabActiveStyle} to='/timelines/public'><i className='fa fa-fw fa-globe' /> <FormattedMessage id='tabs_bar.public' defaultMessage='Public' /></Link>
     </div>
   );

app/assets/javascripts/components/features/ui/index.jsx

@@ -1,13 +1,14 @@
-import ColumnsArea            from './components/columns_area';
+import ColumnsArea from './components/columns_area';
 import NotificationsContainer from './containers/notifications_container';
-import PureRenderMixin        from 'react-addons-pure-render-mixin';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
-import LoadingBarContainer    from './containers/loading_bar_container';
+import LoadingBarContainer from './containers/loading_bar_container';
-import HomeTimeline           from '../home_timeline';
+import HomeTimeline from '../home_timeline';
-import MentionsTimeline       from '../mentions_timeline';
+import MentionsTimeline from '../mentions_timeline';
-import Compose                from '../compose';
+import Compose from '../compose';
-import MediaQuery             from 'react-responsive';
+import MediaQuery from 'react-responsive';
-import TabsBar                from './components/tabs_bar';
+import TabsBar from './components/tabs_bar';
-import ModalContainer         from './containers/modal_container';
+import ModalContainer from './containers/modal_container';
+import Notifications from '../notifications';
 
 const UI = React.createClass({
 
@@ -26,11 +27,11 @@ const UI = React.createClass({
           {this.props.children}
         </MediaQuery>
 
-        <MediaQuery minWidth={layoutBreakpoint}>
+        <MediaQuery minWidth={layoutBreakpoint + 1}>
           <ColumnsArea>
             <Compose />
             <HomeTimeline trackScroll={false} />
-            <MentionsTimeline trackScroll={false} />
+            <Notifications trackScroll={false} />
             {this.props.children}
           </ColumnsArea>
         </MediaQuery>