Created select account input

moneymgr_web/src/widgets/AccountIconWidget.tsx

@@ -3,7 +3,7 @@ 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 {
+export function AccountIconWidget(p: { account: Account }): React.ReactElement {
   const darkTheme = useDarkTheme();
 
   return (

moneymgr_web/src/widgets/MoneyNavList.tsx

@@ -14,7 +14,7 @@ import React from "react";
 import { useLocation } from "react-router-dom";
 import { useAccounts } from "../hooks/AccountsListProvider";
 import { usePublicMode } from "../hooks/context_providers/PublicModeProvider";
-import { AccountWidget } from "./AccountWidget";
+import { AccountIconWidget } from "./AccountIconWidget";
 import { AmountWidget } from "./AmountWidget";
 import { RouterLink } from "./RouterLink";
 import { useUnmatchedInboxEntriesCount } from "../hooks/UnmatchedInboxEntriesCountProvider";
@@ -74,7 +74,7 @@ export function MoneyNavList(): React.ReactElement {
             publicMode.enabled ? <></> : <AmountWidget amount={a.balance} />
           }
           uri={`/account/${a.id}`}
-          icon={<AccountWidget account={a} />}
+          icon={<AccountIconWidget account={a} />}
         />
       ))}
     </List>

moneymgr_web/src/widgets/MovementWidget.tsx

@@ -3,7 +3,7 @@ import CallReceivedIcon from "@mui/icons-material/CallReceived";
 import React from "react";
 import { Movement, MovementApi } from "../api/MovementsApi";
 import { useAccounts } from "../hooks/AccountsListProvider";
-import { AccountWidget } from "./AccountWidget";
+import { AccountIconWidget } from "./AccountIconWidget";
 import { AmountWidget } from "./AmountWidget";
 import { AsyncWidget } from "./AsyncWidget";
 
@@ -53,7 +53,9 @@ export function MovementWidget(p: { id: number }): React.ReactElement {
               <span style={{ width: "0.5em" }} />
               &bull;
               <span style={{ width: "0.5em" }} />
-              <AccountWidget account={accounts.get(movement!.account_id)!} />
+              <AccountIconWidget
+                account={accounts.get(movement!.account_id)!}
+              />
               {accounts.get(movement!.account_id)?.name}
             </span>
           </span>

moneymgr_web/src/widgets/forms/AccountInput.tsx

@@ -0,0 +1,50 @@
+import { MenuItem, Select, Typography } from "@mui/material";
+import { AccountIconWidget } from "../AccountIconWidget";
+import { useAccounts } from "../../hooks/AccountsListProvider";
+import { AmountWidget } from "../AmountWidget";
+
+export function AccountInput(p: {
+  value: number;
+  onChange: (value: number) => void;
+  label?: string;
+}): React.ReactElement {
+  const accounts = useAccounts();
+  let current = p.value;
+  if (!current && accounts.list.list.length > 0)
+    current = (accounts.list.default ?? accounts.list.list[0]).id;
+
+  return (
+    <Select
+      value={p.value}
+      label={p.label ?? ""}
+      onChange={(e) => p.onChange(Number(e.target.value))}
+      size="small"
+    >
+      {accounts.list.list.map((a) => (
+        <MenuItem value={a.id}>
+          <span
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              height: "100%",
+            }}
+          >
+            <AccountIconWidget account={a} />
+            <span
+              style={{
+                marginLeft: "1em",
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              <span>{a.name}</span>
+              <Typography variant="caption">
+                <AmountWidget amount={a.balance} />
+              </Typography>
+            </span>
+          </span>
+        </MenuItem>
+      ))}
+    </Select>
+  );
+}