Add badges to files

src/pages/Diagnose.tsx

@@ -13,6 +13,7 @@ import {
   Space,
   Divider,
   Typography,
+  Badge,
 } from 'antd';
 import {
   FileTextOutlined,
@@ -43,12 +44,15 @@ import TriggerLogsParser, {
 } from '../utils/logs/TriggerLogsParser';
 import ToothCanvas from '../components/TriggerLogs/ToothCanvas';
 import Loader from '../components/Loader';
+import { Colors } from '../utils/colors';
 
 const { Content } = Layout;
 const { Step } = Steps;
 
 const edgeUnknown = 'Unknown';
 
+const badgeStyle = { backgroundColor: Colors.TEXT };
+
 const mapStateToProps = (state: AppState) => ({
   ui: state.ui,
   status: state.status,
@@ -152,7 +156,7 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa
             style={{ marginLeft: 20 }}
             items={[
               {
-                label: <FileTextOutlined />,
+                label: <><FileTextOutlined /><Badge size="small" style={badgeStyle} count={2} /></>,
                 key: 'files',
                 children: (
                   <PerfectScrollbar options={{ suppressScrollX: true }}>

src/pages/Logs.tsx

@@ -13,6 +13,7 @@ import {
   Steps,
   Space,
   Divider,
+  Badge,
 } from 'antd';
 import {
   FileTextOutlined,
@@ -50,6 +51,7 @@ import {
   UIState,
 } from '../types/state';
 import Loader from '../components/Loader';
+import { Colors } from '../utils/colors';
 
 const { Content } = Layout;
 const { Step } = Steps;
@@ -58,6 +60,8 @@ const margin = 30;
 const sidebarWidth = 250;
 const minCanvasHeightInner = 600;
 
+const badgeStyle = { backgroundColor: Colors.TEXT };
+
 const mapStateToProps = (state: AppState) => ({
   ui: state.ui,
   tune: state.tune,
@@ -226,7 +230,7 @@ const Logs = ({
             style={{ marginLeft: 20 }}
             items={[
               {
-                label: <EditOutlined />,
+                label: <><EditOutlined /><Badge size="small" style={badgeStyle} count={fields.length} /></>,
                 key: 'fields',
                 children: (
                   <>
@@ -261,7 +265,7 @@ const Logs = ({
                 ),
               },
               {
-                label: <FileTextOutlined />,
+                label: <><FileTextOutlined /><Badge size="small" style={badgeStyle} count="1" /></>,
                 key: 'files',
                 children: (
                   <PerfectScrollbar options={{ suppressScrollX: true }}>