Added an unread count badge on message bar

src/App.css

@@ -440,11 +440,10 @@
   display: flex;
   justify-content: space-between;
   padding: 0 5px;
-  box-shadow: 0 0 10px 0 #3333;
+  border-bottom: 1px solid #f1f1f1;
 }
 
 .message-bar .title-bar:hover {
-  background: #f6f6f6;
   cursor: pointer;
 }
 
@@ -474,6 +473,12 @@
   transform: rotate(-90deg);
 }
 
+.message-bar .title-bar .badge {
+  margin-left: 7px;
+  background: #ffeb90;
+  color: #111;
+}
+
 .message-bar .no-messages {
   font-size: 12px;
   color: #333;
@@ -552,6 +557,17 @@
   background-repeat: no-repeat;
   border-radius: 4px;
   height: 25px;
+  min-height: 25px;
   margin: 10px auto;
   border: 2px solid transparent;
 }
+
+.badge {
+  background-color: #999;
+  display: inline-block;
+  padding: 5px;
+  font-size: 10px;
+  font-weight: 800;
+  color: #fff;
+  border-radius: 5px;
+}

src/components/MessageBar.tsx

@@ -111,6 +111,14 @@ export default function MessageBar(props: {
   const [collapsed, setCollapsed] = useState(false);
   const flipCollapsed = useCallback(() => setCollapsed(collapsed => !collapsed), []);
 
+  const [readMessageCount, setReadMessageCount] = useState<number>(0);
+  useEffect(() => {
+    if (!collapsed) {
+      setReadMessageCount(messages.length);
+    }
+  }, [messages, collapsed]);
+  const unreadMessageCount = useMemo(() => messages.length - readMessageCount, [messages, readMessageCount]);
+
   const [inputValue, setInputValue] = useState('');
 
   const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(e => {
@@ -139,6 +147,9 @@ export default function MessageBar(props: {
         <div className="profile">
           <PlayerAvatar playerId={playerId}/>
           <a>Messages</a>
+          {
+            (collapsed && unreadMessageCount > 0) && <span className="badge">{unreadMessageCount > 99 ? '99+' : unreadMessageCount}</span>
+          }
         </div>
         <div className="icon">
           <p style={{transform: collapsed ? 'rotate(-90deg)' : 'rotate(90deg)'}}>❮</p>