Add account type

moneymgr_web/src/widgets/AccountWidget.tsx

@@ -0,0 +1,25 @@
+import { Account } from "../api/AccountApi";
+import { ServerApi } from "../api/ServerApi";
+import { useDarkTheme } from "../hooks/context_providers/DarkThemeProvider";
+import { toBase64 } from "@jsonjoy.com/base64";
+
+export function AccountWidget(p: { account: Account }): React.ReactElement {
+  const darkTheme = useDarkTheme();
+
+  return (
+    <img
+      style={{
+        height: "1.5em",
+        width: "1.5em",
+        backgroundColor: darkTheme.enabled ? "white" : "black",
+        mask: `url(\"data:image/svg+xml;base64,${toBase64(
+          new TextEncoder().encode(
+            ServerApi.Config.accounts_types.find(
+              (t) => t.code === p.account.type
+            )!.icon
+          )
+        )}\")`,
+      }}
+    />
+  );
+}

moneymgr_web/src/widgets/MoneyNavList.tsx

@@ -1,4 +1,4 @@
-import { mdiAccount, mdiApi, mdiCashMultiple, mdiHome } from "@mdi/js";
+import { mdiApi, mdiCashMultiple, mdiHome } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
   Divider,
@@ -8,8 +8,10 @@ import {
   ListItemText,
   Typography,
 } from "@mui/material";
+import React from "react";
 import { useLocation } from "react-router-dom";
 import { useAccounts } from "../hooks/AccountsListProvider";
+import { AccountWidget } from "./AccountWidget";
 import { RouterLink } from "./RouterLink";
 
 export function MoneyNavList(): React.ReactElement {
@@ -59,7 +61,7 @@ export function MoneyNavList(): React.ReactElement {
         <NavLink
           label={a.name}
           uri={`/account/${a.id}`}
-          icon={<Icon path={mdiAccount} size={1} />}
+          icon={<AccountWidget account={a} />}
         />
       ))}
     </List>