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; + } +}