Add toPreviousPage in router

- Allows the WorkInProgress cancel & unfocus to go back to the previous
page instead of a default one.
- Change layout of overview buttons
- Add a back button in the overview, only visible in pages with a
sidebar
- Clear the history on augmentation install & on prestige

src/ui/React/CharacterOverview.tsx

@@ -16,16 +16,21 @@ import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import SaveIcon from "@mui/icons-material/Save";
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ClearAllIcon from "@mui/icons-material/ClearAll";
 
 import { Settings } from "../../Settings/Settings";
 import { use } from "../Context";
 import { StatsProgressOverviewCell } from "./StatsProgressBar";
 import { BitNodeMultipliers } from "../../BitNode/BitNodeMultipliers";
+import { IRouter, Page } from "../Router";
+import { Box, Tooltip } from "@mui/material";
 
 interface IProps {
   save: () => void;
   killScripts: () => void;
+  router: IRouter;
+  allowBackButton: boolean;
 }
 
 function Intelligence(): React.ReactElement {
@@ -205,7 +210,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export { useStyles as characterOverviewStyles };
 
-export function CharacterOverview({ save, killScripts }: IProps): React.ReactElement {
+export function CharacterOverview({ save, killScripts, router, allowBackButton }: IProps): React.ReactElement {
   const [killOpen, setKillOpen] = useState(false);
   const player = use.Player();
 
@@ -244,6 +249,9 @@ export function CharacterOverview({ save, killScripts }: IProps): React.ReactEle
     player.charisma_mult * BitNodeMultipliers.CharismaLevelMultiplier,
   );
 
+  const previousPageName = router.previousPage() < 0
+    ? '' : Page[router.previousPage() ?? 0].replace(/([a-z])([A-Z])/g, '$1 $2');
+
   return (
     <>
       <Table sx={{ display: "block", m: 1 }}>
@@ -418,21 +426,33 @@ export function CharacterOverview({ save, killScripts }: IProps): React.ReactEle
           </TableRow>
           <Work />
           <Bladeburner />
-
-          <TableRow>
-            <TableCell align="center" classes={{ root: classes.cellNone }}>
-              <IconButton onClick={save}>
-                <SaveIcon color={Settings.AutosaveInterval !== 0 ? "primary" : "error"} />
-              </IconButton>
-            </TableCell>
-            <TableCell align="center" classes={{ root: classes.cellNone }}>
-              <IconButton onClick={() => setKillOpen(true)}>
-                <ClearAllIcon color="error" />
-              </IconButton>
-            </TableCell>
-          </TableRow>
         </TableBody>
       </Table>
+      <Box sx={{ display: 'flex', borderTop: `1px solid ${Settings.theme.welllight}` }}>
+        <Box sx={{ display: 'flex', flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
+          <IconButton onClick={save}>
+            <Tooltip title="Save game">
+              <SaveIcon color={Settings.AutosaveInterval !== 0 ? "primary" : "error"} />
+            </Tooltip>
+          </IconButton>
+          {allowBackButton && (
+            <IconButton
+              disabled={!previousPageName}
+              onClick={() => router.toPreviousPage()}>
+              <Tooltip title={previousPageName ? `Go back to "${previousPageName}"` : ''}>
+                <ArrowBackIcon />
+              </Tooltip>
+            </IconButton>
+          )}
+        </Box>
+        <Box sx={{ display: 'flex', flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
+          <IconButton onClick={() => setKillOpen(true)}>
+            <Tooltip title="Kill all running scripts">
+              <ClearAllIcon color="error" />
+            </Tooltip>
+          </IconButton>
+        </Box>
+      </Box>
       <KillScriptsModal open={killOpen} onClose={() => setKillOpen(false)} killScripts={killScripts} />
     </>
   );