feat: unread for mobile

src/client/chat--center.jsx

@@ -2,6 +2,12 @@ import './chat--center.scss';
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import {useSelector} from 'react-redux';
+
+import {
+  unreadChannelSelector,
+  unreadUserSelector,
+} from '~/common/state/user';
 
 import useChannel from '~/client/hooks/useChannel';
 
@@ -10,6 +16,9 @@ import ChatMessages from './chat--messages';
 export default function ChatCenter(props) {
   const {onButton} = props;
   const channel = useChannel();
+  const unreadChannel = useSelector(unreadChannelSelector);
+  const unreadUser = useSelector(unreadUserSelector);
+  const unread = unreadChannel + unreadUser;
   return (
     <div
       className="center flexed"
@@ -27,6 +36,7 @@ export default function ChatCenter(props) {
           >
             💬
           </span>
+          {unread ? <span className="unread">{unread}</span> : null}
         </button>
         <div className="center__headerChannel">
           <span className="tiny">

src/client/chat--center.scss

@@ -21,10 +21,17 @@
 .center__headerButton {
   border: none;
   height: 3em;
+  position: relative;
   width: 3em;
   @include breakpoint(desktop) {
     display: none;
   }
+  .unread {
+    bottom: -0.2em;
+    position: absolute;
+    right: -0.8em;
+    z-index: 100;
+  }
 }
 
 .button--right {