Add accounts list as a provider

moneymgr_web/src/widgets/BaseAuthenticatedPage.tsx

@@ -3,9 +3,10 @@ import * as React from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 import { useAuth } from "../App";
 import { AuthApi, AuthInfo } from "../api/AuthApi";
+import { AccountsListProvider } from "../hooks/AccountsListProvider";
 import { AsyncWidget } from "./AsyncWidget";
-import { MoneyWebAppBar } from "./MoneyWebAppBar";
 import { MoneyNavList } from "./MoneyNavList";
+import { MoneyWebAppBar } from "./MoneyWebAppBar";
 
 interface AuthInfoContext {
   info: AuthInfo;
@@ -46,44 +47,46 @@ export function BaseAuthenticatedPage(): React.ReactElement {
             reloadAuthInfo: load,
           }}
         >
-          <Box
-            component="div"
-            sx={{
-              minHeight: "100vh",
-              display: "flex",
-              flexDirection: "column",
-              backgroundColor: (theme) =>
-                theme.palette.mode === "light"
-                  ? theme.palette.grey[100]
-                  : theme.palette.grey[900],
-              color: (theme) =>
-                theme.palette.mode === "light"
-                  ? theme.palette.grey[900]
-                  : theme.palette.grey[100],
-            }}
-          >
-            <MoneyWebAppBar onSignOut={signOut} />
-
+          <AccountsListProvider>
             <Box
+              component="div"
               sx={{
+                minHeight: "100vh",
                 display: "flex",
-                flex: "2",
+                flexDirection: "column",
+                backgroundColor: (theme) =>
+                  theme.palette.mode === "light"
+                    ? theme.palette.grey[100]
+                    : theme.palette.grey[900],
+                color: (theme) =>
+                  theme.palette.mode === "light"
+                    ? theme.palette.grey[900]
+                    : theme.palette.grey[100],
               }}
             >
-              <MoneyNavList />
-              <div
-                style={{
-                  flexGrow: 1,
-                  flexShrink: 0,
-                  flexBasis: 0,
-                  minWidth: 0,
+              <MoneyWebAppBar onSignOut={signOut} />
+
+              <Box
+                sx={{
                   display: "flex",
+                  flex: "2",
                 }}
               >
-                <Outlet />
-              </div>
+                <MoneyNavList />
+                <div
+                  style={{
+                    flexGrow: 1,
+                    flexShrink: 0,
+                    flexBasis: 0,
+                    minWidth: 0,
+                    display: "flex",
+                  }}
+                >
+                  <Outlet />
+                </div>
+              </Box>
             </Box>
-          </Box>
+          </AccountsListProvider>
         </AuthInfoContextK>
       )}
     />