TabsBar: display counters only on profile pages where they're needed

app/soapbox/features/ui/components/tabs_bar.js

@@ -53,9 +53,19 @@ class TabsBar extends React.PureComponent {
     return pathname === '/' || pathname.startsWith('/timeline/');
   }
 
+  onProfilePage = () => {
+    try {
+      const { pathname } = this.context.router.route.location;
+      return pathname.startsWith('/@') && !pathname.includes('/posts/');
+    } catch {
+      return false;
+    }
+  }
+
   render() {
     const { intl, account, logo, onOpenCompose, onOpenSidebar, features, dashboardCount, notificationCount, chatsCount } = this.props;
     const { collapsed } = this.state;
+    const profilePage = this.onProfilePage();
 
     const classes = classNames('tabs-bar', {
       'tabs-bar--collapsed': collapsed,
@@ -83,6 +93,8 @@ class TabsBar extends React.PureComponent {
           </div>
           <div className='tabs-bar__split tabs-bar__split--right'>
             {account ? (
+              <>
+                {profilePage && (
                   <>
                     <NavLink key='notifications' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications'>
                       <IconWithCounter
@@ -117,6 +129,8 @@ class TabsBar extends React.PureComponent {
                         <span><FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' /></span>
                       </NavLink>
                     )}
+                  </>
+                )}
 
                 <ThemeToggle />
                 <div className='tabs-bar__profile'>