feat: unread for friend requests

src/client/chat--center.jsx

@@ -5,6 +5,8 @@ import React from 'react';
 import {useSelector} from 'react-redux';
 
 import {
+  idSelector,
+  pendingFriendshipSelector,
   unreadChannelSelector,
   unreadUserSelector,
 } from '~/common/state/user';
@@ -16,9 +18,12 @@ import ChatMessages from './chat--messages';
 export default function ChatCenter(props) {
   const {onButton} = props;
   const channel = useChannel();
+  const id = useSelector(idSelector);
+  const pendingFriendship = useSelector(pendingFriendshipSelector)
+    .filter(({addeeId}) => addeeId === id).length;
   const unreadChannel = useSelector(unreadChannelSelector);
   const unreadUser = useSelector(unreadUserSelector);
-  const unread = unreadChannel + unreadUser;
+  const unread = pendingFriendship + unreadChannel + unreadUser;
   return (
     <div
       className="center flexed"

src/client/chat--left.jsx

@@ -26,7 +26,8 @@ export default function ChatLeft() {
   const active = useSelector(leftActiveIndexSelector);
   const isOpen = useSelector(leftIsOpenSelector);
   const id = useSelector(idSelector);
-  const pendingFriendship = useSelector(pendingFriendshipSelector);
+  const pendingFriendship = useSelector(pendingFriendshipSelector)
+    .filter(({addeeId}) => addeeId === id).length;
   const unreadChannel = useSelector(unreadChannelSelector);
   const unreadUser = useSelector(unreadUserSelector);
   const showsAsOpen = isOpen;
@@ -37,7 +38,7 @@ export default function ChatLeft() {
       label: 'Chat',
     },
     {
-      count: unreadUser + pendingFriendship.filter(({addeeId}) => addeeId === id).length,
+      count: unreadUser + pendingFriendship,
       icon: '😁',
       label: 'Friends',
     },

src/client/chat--leftFriends.jsx

@@ -71,7 +71,11 @@ export default function ChatLeftFriends() {
       </form>
       {pendingIncomingFriendship.length > 0 && (
         <>
-          <h2 className="friends__chatsTitle">Incoming requests</h2>
+          <h2 className="friends__chatsTitle">
+            <span className="unread friends__requests">{pendingIncomingFriendship.length}</span>
+            {' '}
+            Incoming requests
+          </h2>
           <ul className="friends__chatsList">
             {pendingIncomingFriendship.map((friendship) => {
               const {addeeId, adderId} = friendship;

src/client/chat--leftFriends.scss

@@ -40,3 +40,9 @@
   text-transform: uppercase;
   white-space: nowrap;
 }
+
+.friends__requests {
+  color: #ffffff;
+  font-size: 0.9em;
+  padding: 0.5em 0.4em;
+}