Create backup route skeleton

moneymgr_web/src/App.tsx

@@ -7,15 +7,16 @@ import {
 } from "react-router-dom";
 import { AuthApi } from "./api/AuthApi";
 import { ServerApi } from "./api/ServerApi";
+import { AccountRoute } from "./routes/AccountRoute";
+import { AccountsRoute } from "./routes/AccountsRoute";
+import { BackupRoute } from "./routes/BackupRoute";
 import { HomeRoute } from "./routes/HomeRoute";
 import { NotFoundRoute } from "./routes/NotFound";
+import { TokensRoute } from "./routes/TokensRoute";
 import { LoginRoute } from "./routes/auth/LoginRoute";
 import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
 import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
 import { BaseLoginPage } from "./widgets/BaseLoginPage";
-import { TokensRoute } from "./routes/TokensRoute";
-import { AccountsRoute } from "./routes/AccountsRoute";
-import { AccountRoute } from "./routes/AccountRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -41,6 +42,7 @@ export function App() {
         <Route path="*" element={<BaseAuthenticatedPage />}>
           <Route path="" element={<HomeRoute />} />
           <Route path="tokens" element={<TokensRoute />} />
+          <Route path="backup" element={<BackupRoute />} />
           <Route path="accounts" element={<AccountsRoute />} />
           <Route path="account/:accountId" element={<AccountRoute />} />
 

moneymgr_web/src/routes/BackupRoute.tsx

@@ -0,0 +1,9 @@
+import { MoneyMgrWebRouteContainer } from "../widgets/MoneyMgrWebRouteContainer";
+
+export function BackupRoute(): React.ReactElement {
+  return (
+    <MoneyMgrWebRouteContainer label={"Backup & Restore"}>
+      TODO
+    </MoneyMgrWebRouteContainer>
+  );
+}

moneymgr_web/src/widgets/MoneyNavList.tsx

@@ -1,4 +1,4 @@
-import { mdiApi, mdiCashMultiple, mdiHome } from "@mdi/js";
+import { mdiCashMultiple, mdiHome } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
   Divider,
@@ -11,10 +11,10 @@ import {
 import React from "react";
 import { useLocation } from "react-router-dom";
 import { useAccounts } from "../hooks/AccountsListProvider";
-import { AccountWidget } from "./AccountWidget";
-import { RouterLink } from "./RouterLink";
-import { AmountWidget } from "./AmountWidget";
 import { usePublicMode } from "../hooks/context_providers/PublicModeProvider";
+import { AccountWidget } from "./AccountWidget";
+import { AmountWidget } from "./AmountWidget";
+import { RouterLink } from "./RouterLink";
 
 export function MoneyNavList(): React.ReactElement {
   const publicMode = usePublicMode();
@@ -28,17 +28,7 @@ export function MoneyNavList(): React.ReactElement {
         backgroundColor: "background.paper",
       }}
     >
-      <NavLink
+      <NavLink label="Home" uri="/" icon={<Icon path={mdiHome} size={1} />} />
-        label="Accueil"
-        uri="/"
-        icon={<Icon path={mdiHome} size={1} />}
-      />
-
-      <NavLink
-        label="API Tokens"
-        uri="/tokens"
-        icon={<Icon path={mdiApi} size={1} />}
-      />
 
       <NavLink
         label="Accounts"

moneymgr_web/src/widgets/MoneyWebAppBar.tsx

@@ -1,7 +1,9 @@
-import { mdiCash } from "@mdi/js";
+import { mdiApi, mdiCash } from "@mdi/js";
 import Icon from "@mdi/react";
+import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
+import LogoutIcon from "@mui/icons-material/Logout";
 import SettingsIcon from "@mui/icons-material/Settings";
-import { Button } from "@mui/material";
+import { Button, Divider, ListItemIcon, ListItemText } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
@@ -10,8 +12,8 @@ import Typography from "@mui/material/Typography";
 import * as React from "react";
 import { useAuthInfo } from "./BaseAuthenticatedPage";
 import { DarkThemeButton } from "./DarkThemeButtonWidget";
-import { RouterLink } from "./RouterLink";
 import { PublicModeButton } from "./PublicModeButtonWidget";
+import { RouterLink } from "./RouterLink";
 
 export function MoneyWebAppBar(p: {
   onSignOut: () => void;
@@ -63,7 +65,7 @@ export function MoneyWebAppBar(p: {
             id="menu-appbar"
             anchorEl={anchorEl}
             anchorOrigin={{
-              vertical: "top",
+              vertical: "bottom",
               horizontal: "right",
             }}
             keepMounted
@@ -74,7 +76,39 @@ export function MoneyWebAppBar(p: {
             open={Boolean(anchorEl)}
             onClose={handleCloseMenu}
           >
-            <MenuItem onClick={signOut}>Sign out</MenuItem>
+            {/* API tokens */}
+            <RouterLink to={"/tokens"}>
+              <MenuItem>
+                <ListItemIcon>
+                  <Icon path={mdiApi} size={1} />
+                </ListItemIcon>
+                <ListItemText secondary="Manage programmatic access to your account">
+                  API Tokens
+                </ListItemText>
+              </MenuItem>
+            </RouterLink>
+
+            {/* Backup */}
+            <RouterLink to={"/backup"}>
+              <MenuItem>
+                <ListItemIcon>
+                  <CloudDownloadIcon />
+                </ListItemIcon>
+                <ListItemText secondary="Backup and restore your data">
+                  Backup
+                </ListItemText>
+              </MenuItem>
+            </RouterLink>
+
+            <Divider />
+
+            {/* Sign out */}
+            <MenuItem onClick={signOut}>
+              <ListItemIcon>
+                <LogoutIcon />
+              </ListItemIcon>
+              <ListItemText secondary="End your session">Sign out</ListItemText>
+            </MenuItem>
           </Menu>
         </div>
       </Toolbar>