fix(lazy-mode): respect manual toggle after unsupported language (@byseif21) (monkeytypegame#7260)

### Description

* lazy mode status “stuck” after switching to a language that does not
support it then goes back to the one that supports it.


* to reproduce
After seeing the “This language does not support lazy mode” warning,
switch back to the one that was working with and manually toggling lazy
mode. It would not update to the selected option.

Author: byseif21

frontend/src/ts/states/arabic-lazy-mode.ts

@@ -0,0 +1,30 @@
+import { z } from "zod";
+import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
+
+const rememberLazyModeLS = new LocalStorageWithSchema({
+  key: "rememberLazyMode",
+  schema: z.boolean(),
+  fallback: false,
+});
+
+const arabicLazyModeLS = new LocalStorageWithSchema({
+  key: "prefersArabicLazyMode",
+  schema: z.boolean(),
+  fallback: true,
+});
+
+export function getRemember(): boolean {
+  return rememberLazyModeLS.get();
+}
+
+export function setRemember(value: boolean): void {
+  rememberLazyModeLS.set(value);
+}
+
+export function getArabicPref(): boolean {
+  return arabicLazyModeLS.get();
+}
+
+export function setArabicPref(value: boolean): void {
+  arabicLazyModeLS.set(value);
+}

frontend/src/ts/states/remember-lazy-mode.ts

@@ -39,7 +39,7 @@ import * as AnalyticsController from "../controllers/analytics-controller";
 import { getAuthenticatedUser, isAuthenticated } from "../firebase";
 import * as ConnectionState from "../states/connection";
 import * as KeymapEvent from "../observables/keymap-event";
-import * as ArabicLazyMode from "../states/arabic-lazy-mode";
+import * as LazyModeState from "../states/remember-lazy-mode";
 import Format from "../utils/format";
 import { QuoteLength, QuoteLengthConfig } from "@monkeytype/schemas/configs";
 import { Mode } from "@monkeytype/schemas/shared";
@@ -342,7 +342,6 @@ export function restart(options = {} as RestartOptions): void {
 }
 
 let lastInitError: Error | null = null;
-let rememberLazyMode: boolean;
 let showedLazyModeNotification: boolean = false;
 let testReinitCount = 0;
 
@@ -421,39 +420,43 @@ async function init(): Promise<boolean> {
       .some((lang) => !lang.noLazyMode);
 
     if (Config.lazyMode && !anySupportsLazyMode) {
-      rememberLazyMode = true;
-      Notifications.add(
-        "None of the selected polyglot languages support lazy mode.",
-        0,
-        {
-          important: true,
-        },
-      );
+      LazyModeState.setRemember(true);
+      if (!showedLazyModeNotification) {
+        Notifications.add(
+          "None of the selected polyglot languages support lazy mode.",
+          0,
+          {
+            important: true,
+          },
+        );
+        showedLazyModeNotification = true;
+      }
       setConfig("lazyMode", false);
-    } else if (rememberLazyMode && anySupportsLazyMode) {
-      setConfig("lazyMode", true, {
-        nosave: true,
-      });
+    } else if (LazyModeState.getRemember() && anySupportsLazyMode) {
+      setConfig("lazyMode", true);
+      LazyModeState.setRemember(false);
+      showedLazyModeNotification = false;
     }
   } else {
     // normal mode
     if (Config.lazyMode && !allowLazyMode) {
-      rememberLazyMode = true;
-      showedLazyModeNotification = true;
-      Notifications.add("This language does not support lazy mode.", 0, {
-        important: true,
-      });
-
+      LazyModeState.setRemember(true);
+      if (!showedLazyModeNotification) {
+        Notifications.add("This language does not support lazy mode.", 0, {
+          important: true,
+        });
+        showedLazyModeNotification = true;
+      }
       setConfig("lazyMode", false);
-    } else if (rememberLazyMode && !language.noLazyMode) {
-      setConfig("lazyMode", true, {
-        nosave: true,
-      });
+    } else if (LazyModeState.getRemember() && allowLazyMode) {
+      setConfig("lazyMode", true);
+      LazyModeState.setRemember(false);
+      showedLazyModeNotification = false;
     }
   }
 
   if (!Config.lazyMode && !language.noLazyMode) {
-    rememberLazyMode = false;
+    LazyModeState.setRemember(false);
   }
 
   if (Config.mode === "custom") {
@@ -1549,7 +1552,10 @@ ConfigEvent.subscribe(({ key, newValue, nosave }) => {
   if (ActivePage.get() === "test") {
     if (key === "language") {
       //automatically enable lazy mode for arabic
-      if ((newValue as string)?.startsWith("arabic") && ArabicLazyMode.get()) {
+      if (
+        (newValue as string)?.startsWith("arabic") &&
+        LazyModeState.getArabicPref()
+      ) {
         setConfig("lazyMode", true, {
           nosave: true,
         });
@@ -1582,13 +1588,7 @@ ConfigEvent.subscribe(({ key, newValue, nosave }) => {
   }
   if (key === "lazyMode" && !nosave) {
     if (Config.language.startsWith("arabic")) {
-      ArabicLazyMode.set(newValue);
-    }
-    if (newValue) {
-      if (!showedLazyModeNotification) {
-        rememberLazyMode = false;
-      }
-      showedLazyModeNotification = false;
+      LazyModeState.setArabicPref(newValue);
     }
   }
 });