Let menus have counters

app/soapbox/components/dropdown_menu.tsx

@@ -24,6 +24,7 @@ export interface MenuItem {
   newTab?: boolean,
   isLogout?: boolean,
   icon: string,
+  count?: number,
   destructive?: boolean,
 }
 
@@ -174,7 +175,7 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
       return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
     }
 
-    const { text, href, to, newTab, isLogout, icon, destructive } = option;
+    const { text, href, to, newTab, isLogout, icon, count, destructive } = option;
 
     return (
       <li className={classNames('dropdown-menu__item truncate', { destructive })} key={`${text}-${i}`}>
@@ -191,7 +192,14 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
           data-method={isLogout ? 'delete' : undefined}
         >
           {icon && <SvgIcon src={icon} className='mr-3 h-5 w-5 flex-none' />}
+
           <span className='truncate'>{text}</span>
+
+          {count ? (
+            <span className='ml-auto h-5 w-5 flex-none block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
+              {count}
+            </span>
+          ) : null}
         </a>
       </li>
     );

app/soapbox/components/sidebar-navigation.tsx

@@ -20,7 +20,7 @@ const SidebarNavigation = () => {
   const notificationCount = useAppSelector((state) => state.notifications.get('unread'));
   const chatsCount = useAppSelector((state) => state.chats.get('items').reduce((acc: any, curr: any) => acc + Math.min(curr.get('unread', 0), 1), 0));
   const followRequestsCount = useAppSelector((state) => state.user_lists.getIn(['follow_requests', 'items'], ImmutableOrderedSet()).count());
-  // const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
+  const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
 
   const baseURL = account ? getBaseURL(account) : '';
   const features = getFeatures(instance);
@@ -76,8 +76,7 @@ const SidebarNavigation = () => {
           to: '/admin',
           icon: require('@tabler/icons/icons/dashboard.svg'),
           text: <FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />,
-          // TODO: let menu items have a counter
+          count: dashboardCount,
-          // count: dashboardCount,
         });
       }
 
@@ -160,6 +159,7 @@ const SidebarNavigation = () => {
           <DropdownMenu items={menu}>
             <SidebarNavigationLink
               icon={require('@tabler/icons/icons/dots-circle-horizontal.svg')}
+              count={dashboardCount}
               text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
             />
           </DropdownMenu>