navigation: show badge for validation tab

apps/web/Components/Calculation/index.tsx

@@ -6,6 +6,7 @@ import { Component as Validation } from './Validation';
 import { Notification } from '@/Components/Common';
 import { NavigationBar, Tabs } from '@/Components/Layout/Navigation';
 import { NavigationProvider } from '@/context/navigation';
+import { useErrors } from '@/stores/hooks';
 import { Media } from '@/styles/media';
 import { getPageTitle } from '@/utils/page';
 import Head from 'next/head';
@@ -42,6 +43,11 @@ export const tabs = [
     icon: <WarningOutlined style={defaultIconStyle} />,
     key: 'errors',
     title: 'Ошибки',
+    useShowBadge: () => {
+      const { hasErrors } = useErrors();
+
+      return hasErrors;
+    },
   },
 ];
 

apps/web/Components/Layout/Navigation.jsx

@@ -1,6 +1,7 @@
 import { NavigationContext } from '@/context/navigation';
 import { useContext, useEffect } from 'react';
 import styled from 'styled-components';
+import { Badge } from 'ui/elements';
 import { Flex } from 'ui/grid';
 
 const Container = styled.div`
@@ -28,15 +29,19 @@ const TabButton = styled.button`
   font-size: 0.75rem;
 `;
 
+const StyledBadge = styled(Badge)`
+  color: unset !important;
+`;
+
 export function NavigationBar() {
   const { currentTab, setCurrentTab, tabsList } = useContext(NavigationContext);
 
   return (
     <Container>
-      {tabsList.map(({ icon, key, title }) => (
+      {tabsList.map(({ icon, key, title, useShowBadge }) => (
         <TabButton key={key} active={key === currentTab} onClick={() => setCurrentTab(key)}>
           <Flex flexDirection="column" alignItems="center">
-            {icon}
+            <StyledBadge dot={useShowBadge?.call()}>{icon}</StyledBadge>
             {title}
           </Flex>
         </TabButton>

apps/web/context/navigation.tsx

@@ -4,6 +4,7 @@ type Tab = {
   icon: JSX.Element;
   key: string;
   title: string;
+  useShowBadge?: () => boolean;
 };
 
 type NavigationContextType = {