add `Badge` component

packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx

@@ -20,6 +20,7 @@ const ChatItem = (props: Props, ref: Ref<HTMLAnchorElement>) => {
 
   const muted = false
   const unread = unreadChats.has(chat.id)
+  const count = unreadChats.get(chat.id)?.count
 
   const { color, displayName } = chat.identity!
 
@@ -30,6 +31,7 @@ const ChatItem = (props: Props, ref: Ref<HTMLAnchorElement>) => {
       state={muted ? 'muted' : unread ? 'unread' : undefined}
     >
       <Avatar size={24} name={displayName} color={color} />#{displayName}
+      {count > 0 && <Badge>{count}</Badge>}
     </Link>
   )
 }
@@ -69,19 +71,19 @@ const Link = styled(NavLink, {
       unread: {
         color: '$accent-1',
         fontWeight: '$600',
-        // '&::after': {
-        //   content: '"1"',
-        //   textAlign: 'center',
-        //   position: 'absolute',
-        //   right: 8,
-        //   width: 22,
-        //   height: 22,
-        //   background: '$primary-1',
-        //   borderRadius: '$full',
-        //   fontSize: 12,
-        //   color: '$accent-11',
-        // },
       },
     },
   },
 })
+
+const Badge = styled('div', {
+  textAlign: 'center',
+  position: 'absolute',
+  right: 8,
+  width: 22,
+  height: 22,
+  background: '$primary-1',
+  borderRadius: '$full',
+  fontSize: 12,
+  color: '$accent-11',
+})