First pass at a LeetCode Zen mode options page (#499)

If we don't like the "everything is easy" behavior, we can also go with "everything is hard" now. Not everything works entirely correctly, but this is a reasonable start.

Author: miorel

.yarn/patches/@types-chrome-npm-0.0.280-34ee4ba05a.patch

@@ -0,0 +1,15 @@
+diff --git a/index.d.ts b/index.d.ts
+index e0bdd370b90c09973074493e8ecaf3ae250b562d..a8981b34374e54d9beb588a2eeaaac43803cbe45 100644
+--- a/index.d.ts
++++ b/index.d.ts
+@@ -5,9 +5,7 @@
+ ////////////////////
+ // Global object
+ ////////////////////
+-interface Window {
+-    chrome: typeof chrome;
+-}
++export type Chrome = typeof chrome;
+ 
+ ////////////////////
+ // Accessibility Features

workspaces/leetcode-zen-mode/package.json

@@ -14,7 +14,12 @@
     "url": "https://github.com/miorel"
   },
   "type": "module",
-  "exports": "./src/main.ts",
+  "exports": {
+    "./content-script-isolated": "./src/extension/content-script-isolated/main.ts",
+    "./content-script-non-isolated": "./src/extension/content-script-non-isolated/main.ts",
+    "./options-ui": "./src/extension/options-ui/main.tsx",
+    ".": null
+  },
   "scripts": {
     "build": "cross-env NODE_OPTIONS=\"--import tsx\" webpack",
     "format": "prettier --color --write .",
@@ -23,13 +28,18 @@
   },
   "dependencies": {
     "@code-chronicles/util": "workspace:*",
-    "nullthrows": "patch:nullthrows@npm%3A1.1.1#~/.yarn/patches/nullthrows-npm-1.1.1-3d1f817134.patch"
+    "immutability-helper": "patch:immutability-helper@npm%3A3.1.1#~/.yarn/patches/immutability-helper-npm-3.1.1-482f1f8f58.patch",
+    "nullthrows": "patch:nullthrows@npm%3A1.1.1#~/.yarn/patches/nullthrows-npm-1.1.1-3d1f817134.patch",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "workspace:*",
     "@code-chronicles/repository-scripts": "workspace:*",
     "@code-chronicles/webpack-chrome-extension-manifest-plugin": "workspace:*",
     "@types/node": "22.9.0",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "cross-env": "7.0.3",
     "eslint": "9.14.0",
     "fork-ts-checker-webpack-plugin": "9.0.2",

workspaces/leetcode-zen-mode/src/extension/constants.ts

@@ -0,0 +1,3 @@
+export const SETTINGS_ATTRIBUTE = "data-leetcode-zen-mode-settings";
+
+export const SETTINGS_STORAGE_KEY = "settings";

workspaces/leetcode-zen-mode/src/extension/content-script-isolated/main.ts

@@ -0,0 +1,28 @@
+import { getChrome } from "@code-chronicles/util/browser-extensions/chrome/getChrome";
+
+import { SETTINGS_ATTRIBUTE, SETTINGS_STORAGE_KEY } from "../constants.ts";
+
+/**
+ * Entry point for the extension content script that will run in an isolated
+ * world, per:
+ * https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts#isolated_world
+ *
+ * Because it's isolated, it should have access to APIs like `chrome.storage`,
+ * and as such, its job is to relay the settings to the non-isolated content
+ * script.
+ */
+async function main(): Promise<void> {
+  const chrome = getChrome();
+  if (!chrome) {
+    console.error("Couldn't find `chrome` in the environment!");
+    return;
+  }
+
+  const settings = await chrome.storage.sync.get(SETTINGS_STORAGE_KEY);
+  document.documentElement.setAttribute(
+    SETTINGS_ATTRIBUTE,
+    JSON.stringify(settings[SETTINGS_STORAGE_KEY]),
+  );
+}
+
+main();

workspaces/leetcode-zen-mode/src/isArrayOfDataByDifficulty.ts renamed to workspaces/leetcode-zen-mode/src/extension/content-script-non-isolated/isArrayOfDataByDifficulty.ts

@@ -1,5 +1,5 @@
 import { injectJsonParseMiddleware } from "@code-chronicles/util/browser-extensions/injectJsonParseMiddleware";
-import { injectWebpackChunkLoadingMiddleware } from "@code-chronicles/util/browser-extensions/injectWebpackChunkLoadingMiddleware";
+import { injectWebpackChunkLoadingMiddleware } from "@code-chronicles/util/browser-extensions/webpackChunkLoading";
 
 import { patchLeetCodeModule } from "./patchLeetCodeModule.ts";
 import { rewriteLeetCodeGraphQLData } from "./rewriteLeetCodeGraphQLData.ts";

workspaces/leetcode-zen-mode/src/main.ts renamed to workspaces/leetcode-zen-mode/src/extension/content-script-non-isolated/main.ts

@@ -0,0 +1,58 @@
+import { isNonArrayObject } from "@code-chronicles/util/isNonArrayObject";
+import { isString } from "@code-chronicles/util/isString";
+import { mapObjectValues } from "@code-chronicles/util/mapObjectValues";
+import { stringToCase } from "@code-chronicles/util/stringToCase";
+
+import { SETTINGS_ATTRIBUTE } from "../constants.ts";
+import { rewriteLeetCodeAggregateDataForDifficulty } from "./rewriteLeetCodeAggregateDataForDifficulty.ts";
+import { PREFERRED_STRING_CASE, STRING_CASE_CHECKERS } from "./stringCase.ts";
+import type { Difficulty } from "../usePreferredDifficulty.ts";
+
+let preferredDifficulty: Difficulty | null = null;
+function getPreferredDifficulty(prevJsonParse: typeof JSON.parse): Difficulty {
+  if (preferredDifficulty == null) {
+    try {
+      preferredDifficulty = (prevJsonParse(
+        String(document.documentElement.getAttribute(SETTINGS_ATTRIBUTE)),
+      ) ?? "Easy") as Difficulty;
+    } catch (err) {
+      console.error(err);
+      preferredDifficulty = "Easy";
+    }
+  }
+
+  return preferredDifficulty;
+}
+
+export function rewriteLeetCodeGraphQLData(
+  value: unknown,
+  prevJsonParse: typeof JSON.parse,
+): unknown {
+  if (Array.isArray(value)) {
+    // Arrays get some extra processing.
+    const rewrittenValue = rewriteLeetCodeAggregateDataForDifficulty(value);
+
+    // Recursively process array values.
+    return rewrittenValue.map((value) =>
+      rewriteLeetCodeGraphQLData(value, prevJsonParse),
+    );
+  }
+
+  if (isNonArrayObject(value)) {
+    // Recursively process object values.
+    return mapObjectValues(value, (value) =>
+      rewriteLeetCodeGraphQLData(value, prevJsonParse),
+    );
+  }
+
+  // Rewrite difficulty strings!
+  if (isString(value) && /^(?:easy|medium|hard)$/i.test(value)) {
+    const stringCase =
+      STRING_CASE_CHECKERS.find(([, checker]) => checker(value))?.[0] ??
+      PREFERRED_STRING_CASE;
+    return stringToCase(getPreferredDifficulty(prevJsonParse), stringCase);
+  }
+
+  // Pass everything else through unchanged.
+  return value;
+}