Improve file viewer dialog

moneymgr_web/src/dialogs/FileViewerDialog.tsx

@@ -1,16 +1,20 @@
 import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
 import {
+  AppBar,
   Button,
   Dialog,
   DialogActions,
   DialogTitle,
+  IconButton,
   Paper,
+  Toolbar,
   Typography,
 } from "@mui/material";
+import DownloadIcon from "@mui/icons-material/Download";
+import CloseIcon from "@mui/icons-material/Close";
 import { filesize } from "filesize";
-import { FileApi, UploadedFile } from "../api/FileApi";
 import React from "react";
-import { AsyncWidget } from "../widgets/AsyncWidget";
+import { FileApi, UploadedFile } from "../api/FileApi";
 
 export function FileViewerDialog(p: {
   open: boolean;
@@ -20,17 +24,40 @@ export function FileViewerDialog(p: {
   if (!p.open) return <></>;
   return (
     <Dialog open={p.open} onClose={p.onClose} fullScreen>
-      <DialogTitle>
+      <AppBar sx={{ position: "relative" }}>
-        {p.file.file_name} ({filesize(p.file.file_size)})
+        <Toolbar>
-      </DialogTitle>
+          <IconButton
+            edge="start"
+            color="inherit"
+            onClick={p.onClose}
+            aria-label="close"
+            autoFocus
+          >
+            <CloseIcon />
+          </IconButton>
+          <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+            {p.file.file_name} ({filesize(p.file.file_size)})
+          </Typography>
+          <a
+            href={FileApi.DownloadURL(p.file, true)}
+            target="_blank"
+            referrerPolicy="no-referrer"
+          >
+            <Button
+              color="info"
+              onClick={p.onClose}
+              startIcon={<DownloadIcon />}
+            >
+              Download
+            </Button>
+          </a>
+        </Toolbar>
+      </AppBar>
       <FileViewer
         url={FileApi.DownloadURL(p.file)}
         downloadUrl={FileApi.DownloadURL(p.file, true)}
         {...p.file}
       />
-      <DialogActions>
-        <Button onClick={p.onClose}>Close</Button>
-      </DialogActions>
     </Dialog>
   );
 }