Gut the TabsBar

app/soapbox/components/thumb_navigation.js

@@ -1,13 +1,47 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import { NavLink, withRouter } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import Icon from 'soapbox/components/icon';
+import IconWithCounter from 'soapbox/components/icon_with_counter';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import { isStaff } from 'soapbox/utils/accounts';
+import { getFeatures } from 'soapbox/utils/features';
 
-export default
+const mapStateToProps = state => {
-@withRouter
+  const me = state.get('me');
+  const reportsCount = state.getIn(['admin', 'openReports']).count();
+  const approvalCount = state.getIn(['admin', 'awaitingApproval']).count();
+  const instance = state.get('instance');
+
+  return {
+    account: state.getIn(['accounts', me]),
+    logo: getSoapboxConfig(state).get('logo'),
+    notificationCount: state.getIn(['notifications', 'unread']),
+    chatsCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
+    dashboardCount: reportsCount + approvalCount,
+    features: getFeatures(instance),
+  };
+};
+
+export default @withRouter
+@connect(mapStateToProps)
 class ThumbNavigation extends React.PureComponent {
 
+  static propTypes = {
+    logo: PropTypes.string,
+    account: ImmutablePropTypes.map,
+    dashboardCount: PropTypes.number,
+    notificationCount: PropTypes.number,
+    chatsCount: PropTypes.number,
+    features: PropTypes.object.isRequired,
+  }
+
   render() {
+    const { account, dashboardCount, features } = this.props;
+
     return (
       <div className='thumb-navigation'>
         <NavLink to='/' exact className='thumb-navigation__link'>
@@ -17,6 +51,24 @@ class ThumbNavigation extends React.PureComponent {
           </span>
         </NavLink>
 
+        {account && (
+          <NavLink to='/notifications' className='thumb-navigation__link'>
+            <Icon id='bell' />
+            <span>
+              <FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />
+            </span>
+          </NavLink>
+        )}
+
+        {(features.chats && account) && (
+          <NavLink to='/chats' className='thumb-navigation__link'>
+            <Icon id='comment' />
+            <span>
+              <FormattedMessage id='navigation.chats' defaultMessage='Chats' />
+            </span>
+          </NavLink>
+        )}
+
         <NavLink to='/search' className='thumb-navigation__link'>
           <Icon id='search' />
           <span>
@@ -24,19 +76,14 @@ class ThumbNavigation extends React.PureComponent {
           </span>
         </NavLink>
 
-        <NavLink to='/notifications' className='thumb-navigation__link'>
+        {(account && isStaff(account)) && (
-          <Icon id='bell' />
+          <NavLink key='dashboard' to='/admin' className='thumb-navigation__link'>
+            <IconWithCounter icon='tachometer' count={dashboardCount} />
             <span>
-            <FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />
+              <FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />
-          </span>
-        </NavLink>
-
-        <NavLink to='/chats' className='thumb-navigation__link'>
-          <Icon id='comment' />
-          <span>
-            <FormattedMessage id='navigation.chats' defaultMessage='Chats' />
             </span>
           </NavLink>
+        )}
       </div>
     );
   }

app/soapbox/features/ui/components/tabs_bar.js

@@ -1,20 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { Link, NavLink, withRouter } from 'react-router-dom';
+import { Link, withRouter } from 'react-router-dom';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
-import IconWithCounter from 'soapbox/components/icon_with_counter';
 import SearchContainer from 'soapbox/features/compose/containers/search_container';
 import Avatar from '../../../components/avatar';
 import ProfileDropdown from './profile_dropdown';
 import { openModal } from '../../../actions/modal';
 import { openSidebar } from '../../../actions/sidebar';
-import Icon from '../../../components/icon';
 import ThemeToggle from '../../ui/components/theme_toggle_container';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import { isStaff } from 'soapbox/utils/accounts';
 import { getFeatures } from 'soapbox/utils/features';
 
 const messages = defineMessages({
@@ -30,10 +27,6 @@ class TabsBar extends React.PureComponent {
     onOpenSidebar: PropTypes.func.isRequired,
     logo: PropTypes.string,
     account: ImmutablePropTypes.map,
-    dashboardCount: PropTypes.number,
-    notificationCount: PropTypes.number,
-    chatsCount: PropTypes.number,
-    features: PropTypes.object.isRequired,
   }
 
   state = {
@@ -53,58 +46,8 @@ class TabsBar extends React.PureComponent {
     return pathname === '/' || pathname.startsWith('/timeline/');
   }
 
-  getNavLinks() {
-    const { intl: { formatMessage }, logo, account, dashboardCount, notificationCount, chatsCount, features } = this.props;
-    const links = [];
-    if (logo) {
-      links.push(
-        <Link key='logo' className='tabs-bar__link--logo' to='/' data-preview-title-id='column.home'>
-          <img alt='Logo' src={logo} />
-          <span><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
-        </Link>);
-    }
-    links.push(
-      <NavLink key='home' className='tabs-bar__link' exact to='/' data-preview-title-id='column.home' isActive={this.isHomeActive}>
-        <Icon id='home' />
-        <span><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
-      </NavLink>);
-    if (account) {
-      links.push(
-        <NavLink key='notifications' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications'>
-          <IconWithCounter icon='bell' count={notificationCount} />
-          <span><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></span>
-        </NavLink>);
-    }
-    if (features.chats && account) {
-      links.push(
-        <NavLink key='chats' className='tabs-bar__link tabs-bar__link--chats' to='/chats' data-preview-title-id='column.chats'>
-          <IconWithCounter icon='comment' count={chatsCount} />
-          <span><FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' /></span>
-        </NavLink>);
-    }
-    if (account && isStaff(account)) {
-      links.push(
-        <NavLink key='dashboard' className='tabs-bar__link' to='/admin' data-preview-title-id='tabs_bar.dashboard'>
-          <IconWithCounter icon='tachometer' count={dashboardCount} />
-          <span><FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' /></span>
-        </NavLink>);
-    }
-    links.push(
-      <NavLink key='search' className='tabs-bar__link tabs-bar__link--search' to='/search' data-preview-title-id='tabs_bar.search'>
-        <Icon id='search' />
-        <span><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></span>
-      </NavLink>,
-    );
-    return links.map((link) =>
-      React.cloneElement(link, {
-        'aria-label': formatMessage({
-          id: link.props['data-preview-title-id'],
-        }),
-      }));
-  }
-
   render() {
-    const { account, onOpenCompose, onOpenSidebar, intl } = this.props;
+    const { account, logo, onOpenCompose, onOpenSidebar, intl } = this.props;
     const { collapsed } = this.state;
 
     const classes = classNames('tabs-bar', {
@@ -115,7 +58,12 @@ class TabsBar extends React.PureComponent {
       <nav className={classes} ref={this.setRef}>
         <div className='tabs-bar__container'>
           <div className='tabs-bar__split tabs-bar__split--left'>
-            {this.getNavLinks()}
+            {logo && (
+              <Link key='logo' className='tabs-bar__link--logo' to='/' data-preview-title-id='column.home'>
+                <img alt='Logo' src={logo} />
+                <span><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
+              </Link>
+            )}
           </div>
           <div className='tabs-bar__split tabs-bar__split--right'>
             <div className='tabs-bar__search-container'>
@@ -155,17 +103,10 @@ class TabsBar extends React.PureComponent {
 
 const mapStateToProps = state => {
   const me = state.get('me');
-  const reportsCount = state.getIn(['admin', 'openReports']).count();
-  const approvalCount = state.getIn(['admin', 'awaitingApproval']).count();
-  const instance = state.get('instance');
 
   return {
     account: state.getIn(['accounts', me]),
     logo: getSoapboxConfig(state).get('logo'),
-    notificationCount: state.getIn(['notifications', 'unread']),
-    chatsCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
-    dashboardCount: reportsCount + approvalCount,
-    features: getFeatures(instance),
   };
 };
 

app/styles/components/search.scss

@@ -163,7 +163,7 @@
 }
 
 .search-popout-container {
-  width: 251px;
+  width: 351px;
   @media screen and (max-width: $nav-breakpoint-2) { width: 100%; }
 }
 

app/styles/components/tabs-bar.scss

@@ -46,7 +46,7 @@
 
   &__search-container {
     display: block;
-    width: 251px;
+    width: 351px;
 
     @media screen and (max-width: 895px) {
       display: none;