Add counts to tab titles

Author: 1ilit

src/components/EditorSidePanel/SidePanel.jsx

@@ -1,6 +1,14 @@
 import { Tabs, TabPane } from "@douyinfe/semi-ui";
 import { Tab } from "../../data/constants";
-import { useLayout, useSelect, useDiagram } from "../../hooks";
+import {
+  useLayout,
+  useSelect,
+  useDiagram,
+  useAreas,
+  useNotes,
+  useEnums,
+  useTypes,
+} from "../../hooks";
 import RelationshipsTab from "./RelationshipsTab/RelationshipsTab";
 import TypesTab from "./TypesTab/TypesTab";
 import Issues from "./Issues";
@@ -17,39 +25,64 @@ import i18n from "../../i18n/i18n";
 export default function SidePanel({ width, resize, setResize }) {
   const { layout } = useLayout();
   const { selectedElement, setSelectedElement } = useSelect();
-  const { database } = useDiagram();
+  const { database, tablesCount, relationshipsCount } = useDiagram();
+  const { areasCount } = useAreas();
+  const { notesCount } = useNotes();
+  const { typesCount } = useTypes();
+  const { enumsCount } = useEnums();
   const { t } = useTranslation();
 
   const tabList = useMemo(() => {
     const tabs = [
-      { tab: t("tables"), itemKey: Tab.TABLES, component: <TablesTab /> },
       {
-        tab: t("relationships"),
+        tab: `${t("tables")} (${tablesCount})`,
+        itemKey: Tab.TABLES,
+        component: <TablesTab />,
+      },
+      {
+        tab: `${t("relationships")} (${relationshipsCount})`,
         itemKey: Tab.RELATIONSHIPS,
         component: <RelationshipsTab />,
       },
-      { tab: t("subject_areas"), itemKey: Tab.AREAS, component: <AreasTab /> },
-      { tab: t("notes"), itemKey: Tab.NOTES, component: <NotesTab /> },
+      {
+        tab: `${t("subject_areas")} (${areasCount})`,
+        itemKey: Tab.AREAS,
+        component: <AreasTab />,
+      },
+      {
+        tab: `${t("notes")} (${notesCount})`,
+        itemKey: Tab.NOTES,
+        component: <NotesTab />,
+      },
     ];
 
     if (databases[database].hasTypes) {
       tabs.push({
-        tab: t("types"),
+        tab: `${t("types")} (${typesCount})`,
         itemKey: Tab.TYPES,
         component: <TypesTab />,
       });
     }
 
     if (databases[database].hasEnums) {
       tabs.push({
-        tab: t("enums"),
+        tab: `${t("enums")} (${enumsCount})`,
         itemKey: Tab.ENUMS,
         component: <EnumsTab />,
       });
     }
 
     return isRtl(i18n.language) ? tabs.reverse() : tabs;
-  }, [t, database]);
+  }, [
+    t,
+    database,
+    tablesCount,
+    relationshipsCount,
+    areasCount,
+    typesCount,
+    enumsCount,
+    notesCount,
+  ]);
 
   return (
     <div className="flex h-full">

src/context/AreasContext.jsx

@@ -92,7 +92,14 @@ export default function AreasContextProvider({ children }) {
 
   return (
     <AreasContext.Provider
-      value={{ areas, setAreas, updateArea, addArea, deleteArea }}
+      value={{
+        areas,
+        setAreas,
+        updateArea,
+        addArea,
+        deleteArea,
+        areasCount: areas.length,
+      }}
     >
       {children}
     </AreasContext.Provider>

src/context/DiagramContext.jsx

@@ -262,6 +262,8 @@ export default function DiagramContextProvider({ children }) {
         deleteRelationship,
         database,
         setDatabase,
+        tablesCount: tables.length,
+        relationshipsCount: relationships.length,
       }}
     >
       {children}

src/context/EnumsContext.jsx

@@ -74,6 +74,7 @@ export default function EnumsContextProvider({ children }) {
         addEnum,
         updateEnum,
         deleteEnum,
+        enumsCount: enums.length,
       }}
     >
       {children}

src/context/NotesContext.jsx

@@ -91,7 +91,14 @@ export default function NotesContextProvider({ children }) {
 
   return (
     <NotesContext.Provider
-      value={{ notes, setNotes, updateNote, addNote, deleteNote }}
+      value={{
+        notes,
+        setNotes,
+        updateNote,
+        addNote,
+        deleteNote,
+        notesCount: notes.length,
+      }}
     >
       {children}
     </NotesContext.Provider>

src/context/TypesContext.jsx

@@ -75,6 +75,7 @@ export default function TypesContextProvider({ children }) {
         addType,
         updateType,
         deleteType,
+        typesCount: types.length,
       }}
     >
       {children}