Default ambassador menu open, persist menu state

src/pages/overlay/components/buttons/Buttons.tsx

@@ -17,7 +17,7 @@ type ButtonsOptions = Readonly<
 
 interface ButtonsProps<T extends ButtonsOptions> {
   options: T;
-  onClick: (key: T[number]["key"] | undefined) => void;
+  onClick: (key: T[number]["key"] | "") => void;
   active?: string;
 }
 
@@ -32,8 +32,7 @@ export default function Buttons<T extends ButtonsOptions = ButtonsOptions>(
       options
         .map((option) => ({
           ...option,
-          onClick: () =>
-            onClick(active === option.key ? undefined : option.key),
+          onClick: () => onClick(active === option.key ? "" : option.key),
           active: active === option.key,
         }))
         .sort((a, b) => {

src/pages/overlay/components/overlay/Overlay.tsx

@@ -59,7 +59,10 @@ const overlayOptions = [
   },
 ] as const;
 
-type OverlayKey = (typeof overlayOptions)[number]["key"];
+export const isValidOverlayKey = (key: string) =>
+  key == "" || overlayOptions.some((option) => option.key === key);
+
+export type OverlayKey = (typeof overlayOptions)[number]["key"] | "";
 
 type ActiveAmbassadorState = {
   key?: AmbassadorKey;
@@ -85,10 +88,22 @@ export default function Overlay() {
 
   const [activeAmbassador, setActiveAmbassador] =
     useState<ActiveAmbassadorState>({});
-  const [visibleOption, setVisibleOption] = useState<OverlayKey>();
+  const [visibleOption, setVisibleOption] = useState<OverlayKey>(
+    settings.openedMenu.value,
+  );
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const awakingRef = useRef(false);
 
+  // update setting when opened menu changes
+  useEffect(() => {
+    settings.openedMenu.change(visibleOption);
+  }, [visibleOption]);
+
+  // open saved (or default) menu when mounted
+  useEffect(() => {
+    setVisibleOption(settings.openedMenu.value);
+  }, [settings.openedMenu.value]);
+
   // When a chat command is run, wake the overlay
   useChatCommand(
     useCallback(
@@ -104,7 +119,8 @@ export default function Overlay() {
           // Dismiss the overlay after a delay
           if (timeoutRef.current) clearTimeout(timeoutRef.current);
           timeoutRef.current = setTimeout(() => {
-            setVisibleOption(undefined);
+            console.log(`setting visible option in timeout`);
+            setVisibleOption("");
             setActiveAmbassador({});
           }, commandTimeout);
 
@@ -139,7 +155,7 @@ export default function Overlay() {
   // Handle body clicks, dismissing the overlay if the user clicks outside of it
   const bodyClick = useCallback((e: MouseEvent) => {
     if (!visibleUnderCursor(e)) {
-      setVisibleOption(undefined);
+      setVisibleOption("");
     }
   }, []);
 

src/pages/overlay/components/overlay/settings/Settings.tsx

@@ -17,16 +17,16 @@ export default function Settings(props: OverlayOptionProps) {
     <Card className={className} title="Extension Settings">
       <ul className={styles.settings}>
         {typeSafeObjectEntries(settings).map(([key, setting]) => {
-          if (setting.devOnly && process.env.NODE_ENV !== "development")
+          if (process.env.NODE_ENV !== "development" && !setting.configurable)
             return null;
 
           return (
             <li key={key}>
               {setting.type === "boolean" && (
                 <Toggle
                   label={setting.title}
-                  value={setting.value}
-                  onChange={setting.change}
+                  value={setting.value as boolean}
+                  onChange={setting.change as (value: boolean) => void}
                 />
               )}
             </li>

src/pages/overlay/hooks/useSettings.tsx

@@ -12,19 +12,28 @@ import {
   typeSafeObjectEntries,
   typeSafeObjectFromEntries,
 } from "../../../utils/helpers";
+import { OverlayKey, isValidOverlayKey } from "../components/overlay/Overlay";
 
 const settings = {
   disableChatPopup: {
     title: "Prevent Mod-triggered Card Popups",
     type: "boolean",
     process: (value: any) => !!value,
-    devOnly: false,
+    configurable: true,
   },
   disableOverlayHiding: {
     title: "(DEV) Prevent app hiding automatically",
     type: "boolean",
     process: (value: any) => !!value,
-    devOnly: true,
+    configurable: false,
+  },
+  openedMenu: {
+    title: "Menu that was last opened",
+    type: "string",
+    process: (value: any): OverlayKey => {
+      return isValidOverlayKey(value) ? value : "ambassadors";
+    },
+    configurable: false,
   },
 };
 
@@ -78,7 +87,7 @@ export const SettingsProvider = ({ children }: { children: ReactNode }) => {
             change: (value: any) => change(key, value),
           },
         ]),
-      ),
+      ) as Settings,
     [stored, change],
   );