diff --git a/app/soapbox/features/ui/components/chats_counter_icon.js b/app/soapbox/features/ui/components/chats_counter_icon.js
new file mode 100644
index 000000000..d98cabadc
--- /dev/null
+++ b/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);
diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js
index c394c488a..e85efa40a 100644
--- a/app/soapbox/features/ui/components/tabs_bar.js
+++ b/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 {
);
}
+ if (account) {
+ links.push(
+
+
+
+
+ );
+ }
if (account && isStaff(account)) {
links.push(
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 6b4acab23..d287c68a4 100644
--- a/app/styles/chats.scss
+++ b/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;
+ }
+}