From 7303c0320b2b2c3e19fc461a5c10c6e0be8c5a04 Mon Sep 17 00:00:00 2001
From: Piotr Rogowski <piotr.rogowski0@gmail.com>
Date: Tue, 18 Oct 2022 17:48:37 +0200
Subject: [PATCH] Add badges to files

---
 src/pages/Diagnose.tsx | 6 +++++-
 src/pages/Logs.tsx     | 8 ++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/pages/Diagnose.tsx b/src/pages/Diagnose.tsx
index 789fb30..e51de50 100644
--- a/src/pages/Diagnose.tsx
+++ b/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 }}>
diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx
index 29d3a2b..c58d1a1 100644
--- a/src/pages/Logs.tsx
+++ b/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 }}>