Display in a chip the number of unmatched inbox entries

moneymgr_web/src/widgets/MoneyNavList.tsx

@@ -1,8 +1,10 @@
 import { mdiCashMultiple, mdiHome, mdiInbox } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
+  Chip,
   Divider,
   List,
+  ListItem,
   ListItemButton,
   ListItemIcon,
   ListItemText,
@@ -15,10 +17,12 @@ import { usePublicMode } from "../hooks/context_providers/PublicModeProvider";
 import { AccountWidget } from "./AccountWidget";
 import { AmountWidget } from "./AmountWidget";
 import { RouterLink } from "./RouterLink";
+import { useUnmatchedInboxEntriesCount } from "../hooks/UnmatchedInboxEntriesCountProvider";
 
 export function MoneyNavList(): React.ReactElement {
   const publicMode = usePublicMode();
   const accounts = useAccounts();
+  const unmatched = useUnmatchedInboxEntriesCount();
   return (
     <List
       dense
@@ -35,11 +39,17 @@ export function MoneyNavList(): React.ReactElement {
         uri="/accounts"
         icon={<Icon path={mdiCashMultiple} size={1} />}
       />
-      {/* TODO : show number of unmatched */}
       <NavLink
         label="Inbox"
         uri="/inbox"
         icon={<Icon path={mdiInbox} size={1} />}
+        secondary={
+          unmatched.count > 0 ? (
+            <Chip label={unmatched.count} size="small" />
+          ) : (
+            <></>
+          )
+        }
       />
       <Divider />
       {accounts.list.isEmpty && (
@@ -76,14 +86,17 @@ function NavLink(p: {
   uri: string;
   label: string | React.ReactElement;
   secondaryLabel?: string | React.ReactElement;
+  secondary?: React.ReactElement;
 }): React.ReactElement {
   const location = useLocation();
   return (
     <RouterLink to={p.uri}>
-      <ListItemButton selected={p.uri === location.pathname}>
-        <ListItemIcon>{p.icon}</ListItemIcon>
-        <ListItemText primary={p.label} secondary={p.secondaryLabel} />
-      </ListItemButton>
+      <ListItem secondaryAction={p.secondary} disablePadding>
+        <ListItemButton selected={p.uri === location.pathname}>
+          <ListItemIcon>{p.icon}</ListItemIcon>
+          <ListItemText primary={p.label} secondary={p.secondaryLabel} />
+        </ListItemButton>
+      </ListItem>
     </RouterLink>
   );
 }