From f9daf5df641e014f3bc2914624c9c63cd9f4ded1 Mon Sep 17 00:00:00 2001
From: Martin Fournier <martin@mfournier.com>
Date: Sun, 16 Jan 2022 16:54:10 -0500
Subject: [PATCH] Keep the sidebar opened or closed on reload

Previously, going to a full-width page and heading back to the terminal would default the sidebar to its opened state regardless of what it was before.

Now it stores it in the GameRoot's state and also in the Settings so
that it persists over reloads.
---
 src/Settings/Settings.ts       | 8 ++++++++
 src/Sidebar/ui/SidebarRoot.tsx | 9 ++++++++-
 src/ui/GameRoot.tsx            | 9 ++++++++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/Settings/Settings.ts b/src/Settings/Settings.ts
index f524694f1..ddb18d8c1 100644
--- a/src/Settings/Settings.ts
+++ b/src/Settings/Settings.ts
@@ -142,6 +142,11 @@ interface IDefaultSettings {
    * Character overview settings
    */
   overview: OverviewSettings;
+
+  /**
+   *  If the game's sidebar is opened
+   */
+  IsSidebarOpened: boolean;
 }
 
 /**
@@ -194,6 +199,7 @@ export const defaultSettings: IDefaultSettings = {
   SuppressSavedGameToast: false,
   UseIEC60027_2: false,
   ExcludeRunningScriptsFromSave: false,
+  IsSidebarOpened: true,
 
   theme: defaultTheme,
   styles: defaultStyles,
@@ -231,6 +237,8 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
   SuppressSavedGameToast: defaultSettings.SuppressSavedGameToast,
   UseIEC60027_2: defaultSettings.UseIEC60027_2,
   ExcludeRunningScriptsFromSave: defaultSettings.ExcludeRunningScriptsFromSave,
+  IsSidebarOpened: defaultSettings.IsSidebarOpened,
+
   MonacoTheme: "monokai",
   MonacoInsertSpaces: false,
   MonacoFontSize: 20,
diff --git a/src/Sidebar/ui/SidebarRoot.tsx b/src/Sidebar/ui/SidebarRoot.tsx
index 0e51a2175..fdd59c8cc 100644
--- a/src/Sidebar/ui/SidebarRoot.tsx
+++ b/src/Sidebar/ui/SidebarRoot.tsx
@@ -106,6 +106,8 @@ interface IProps {
   player: IPlayer;
   router: IRouter;
   page: Page;
+  opened: boolean;
+  onToggled: (newValue: boolean) => void;
 }
 
 export function SidebarRoot(props: IProps): React.ReactElement {
@@ -337,8 +339,13 @@ export function SidebarRoot(props: IProps): React.ReactElement {
   }, []);
 
   const classes = useStyles();
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(props.opened);
   const toggleDrawer = (): void => setOpen((old) => !old);
+
+  useEffect(() => {
+    props.onToggled(open);
+  }, [open]);
+
   return (
     <Drawer open={open} anchor="left" variant="permanent">
       <ListItem classes={{ root: classes.listitem }} button onClick={toggleDrawer}>
diff --git a/src/ui/GameRoot.tsx b/src/ui/GameRoot.tsx
index 0a66a0bae..2e7a265cc 100644
--- a/src/ui/GameRoot.tsx
+++ b/src/ui/GameRoot.tsx
@@ -78,6 +78,7 @@ import { Context } from "./Context";
 import { RecoveryMode, RecoveryRoot } from "./React/RecoveryRoot";
 import { AchievementsRoot } from "../Achievements/AchievementsRoot";
 import { ErrorBoundary } from "./ErrorBoundary";
+import { Settings } from "../Settings/Settings";
 
 const htmlLocation = location;
 
@@ -220,6 +221,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
 
   const [cinematicText, setCinematicText] = useState("");
   const [errorBoundaryKey, setErrorBoundaryKey] = useState<number>(0);
+  const [sidebarOpened, setSideBarOpened] = useState(Settings.IsSidebarOpened);
 
   function resetErrorBoundary(): void {
     setErrorBoundaryKey(errorBoundaryKey + 1);
@@ -517,7 +519,12 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
             </Overview>
             {withSidebar ? (
               <Box display="flex" flexDirection="row" width="100%">
-                <SidebarRoot player={player} router={Router} page={page} />
+                <SidebarRoot player={player} router={Router} page={page}
+                  opened={sidebarOpened}
+                  onToggled={(isOpened) => {
+                    setSideBarOpened(isOpened);
+                    Settings.IsSidebarOpened = isOpened;
+                  }} />
                 <Box className={classes.root}>{mainPage}</Box>
               </Box>
             ) : (