Tabs: support `count` prop on item

app/soapbox/components/ui/tabs/tabs.tsx

@@ -95,6 +95,7 @@ type Item = {
   href?: string,
   to?: string,
   action?: () => void,
+  count?: number,
   name: string
 }
 interface ITabs {
@@ -118,7 +119,7 @@ const Tabs = ({ items, activeItem }: ITabs) => {
   };
 
   const renderItem = (item: Item, idx: number) => {
-    const { name, text, title } = item;
+    const { name, text, title, count } = item;
 
     return (
       <AnimatedTab
@@ -129,7 +130,15 @@ const Tabs = ({ items, activeItem }: ITabs) => {
         title={title}
         index={idx}
       >
-        {text}
+        <div className='relative'>
+          {count ? (
+            <span className='absolute -top-2 left-full ml-1 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
+              {count}
+            </span>
+          ) : null}
+
+          {text}
+        </div>
       </AnimatedTab>
     );
   };

app/soapbox/features/admin/components/admin-tabs.tsx

@@ -3,6 +3,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { Tabs } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
 
 const messages = defineMessages({
   dashboard: { id: 'admin_nav.dashboard', defaultMessage: 'Dashboard' },
@@ -18,6 +19,9 @@ const AdminTabs: React.FC<IAdminTabs> = ({ activeItem }) => {
   const intl = useIntl();
   const history = useHistory();
 
+  const approvalCount = useAppSelector(state => state.admin.awaitingApproval.count());
+  const reportsCount = useAppSelector(state => state.admin.openReports.count());
+
   const tabs = [{
     name: 'dashboard',
     text: intl.formatMessage(messages.dashboard),
@@ -26,10 +30,12 @@ const AdminTabs: React.FC<IAdminTabs> = ({ activeItem }) => {
     name: 'reports',
     text: intl.formatMessage(messages.reports),
     action: () => history.push('/admin/reports'),
+    count: reportsCount,
   }, {
     name: 'approval',
     text: intl.formatMessage(messages.waitlist),
     action: () => history.push('/admin/approval'),
+    count: approvalCount,
   }];
 
   return <Tabs items={tabs} activeItem={activeItem} />;