Chats: add mobile chat notification counter

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

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import IconWithBadge from 'soapbox/components/icon_with_badge';
+
+const mapStateToProps = state => ({
+  count: state.get('chats').reduce((acc, curr) => acc + curr.get('unread'), 0),
+  id: 'comment',
+});
+
+export default connect(mapStateToProps)(IconWithBadge);

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

@@ -7,6 +7,7 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 import NotificationsCounterIcon from './notifications_counter_icon';
 import ReportsCounterIcon from './reports_counter_icon';
+import ChatsCounterIcon from './chats_counter_icon';
 import SearchContainer from 'soapbox/features/compose/containers/search_container';
 import Avatar from '../../../components/avatar';
 import ActionBar from 'soapbox/features/compose/components/action_bar';
@@ -68,6 +69,14 @@ class TabsBar extends React.PureComponent {
           <span><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></span>
         </NavLink>);
     }
+    if (account) {
+      links.push(
+        <NavLink key='chats' className='tabs-bar__link tabs-bar__link--chats' to='/chats' data-preview-title-id='column.chats'>
+          <Icon id='comment' />
+          <ChatsCounterIcon />
+          <span><FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' /></span>
+        </NavLink>);
+    }
     if (account && isStaff(account)) {
       links.push(
         <a key='reports' className='tabs-bar__link' href='/pleroma/admin/#/reports/index' target='_blank' data-preview-title-id='tabs_bar.reports'>

app/styles/chats.scss

@@ -198,3 +198,15 @@
     }
   }
 }
+
+@media(max-width: 630px) {
+  .chat-panes {
+    display: none;
+  }
+}
+
+@media(min-width: 630px) {
+  .tabs-bar .tabs-bar__link--chats {
+    display: none;
+  }
+}