refactor: config split (@Miodec) (monkeytypegame#7659)

### Description

<!-- Please describe the change(s) made in your PR -->

### Checks

- [ ] Adding quotes?
- [ ] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [ ] Adding a language?
- Make sure to follow the [languages
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LANGUAGES.md)
  - [ ] Add language to `packages/schemas/src/languages.ts`
- [ ] Add language to exactly one group in
`frontend/src/ts/constants/languages.ts`
  - [ ] Add language json file to `frontend/static/languages`
- [ ] Adding a theme?
- Make sure to follow the [themes
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/THEMES.md)
  - [ ] Add theme to `packages/schemas/src/themes.ts`
  - [ ] Add theme to `frontend/src/ts/constants/themes.ts`
  - [ ] (optional) Add theme css file to `frontend/static/themes`
- [ ] Add some screenshots of the theme, especially with different test
settings (colorful, flip colors) to your pull request
- [ ] Adding a layout?
- [ ] Make sure to follow the [layouts
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LAYOUTS.md)
  - [ ] Add layout to `packages/schemas/src/layouts.ts`
  - [ ] Add layout json file to `frontend/static/layouts`
- [ ] Adding a font?
- Make sure to follow the [fonts
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/FONTS.md)
  - [ ] Add font file to `frontend/static/webfonts`
  - [ ] Add font to `packages/schemas/src/fonts.ts`
  - [ ] Add font to `frontend/src/ts/constants/fonts.ts`
- [ ] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [ ] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [ ] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.

<!-- label(optional scope): pull request title (@your_github_username)
-->

<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you.-->

Closes #

<!-- the issue(s) your PR resolves if any (delete if that is not the
case) -->
<!-- please also reference any issues and or PRs related to your pull
request -->
<!-- Also remove it if you are not following any issues. -->

<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[monkeytypegame#1234](monkeytypegame#1234) -->

<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->

Author: Miodec

frontend/__tests__/commandline/util.spec.ts

@@ -1,17 +1,17 @@
-//import type { ConfigMetadata } from "../../src/ts/config-metadata";
+//import type { ConfigMetadata } from "../../src/ts/config/metadata";
 
 import { describe, it, expect, afterAll, vi } from "vitest";
 import * as Util from "../../src/ts/commandline/util";
 
 import type { CommandlineConfigMetadata } from "../../src/ts/commandline/commandline-metadata";
 import type { ConfigKey } from "@monkeytype/schemas/configs";
-import type { ConfigMetadata } from "../../src/ts/config-metadata";
+import type { ConfigMetadata } from "../../src/ts/config/metadata";
 import { z, ZodSchema } from "zod";
 
 const buildCommandForConfigKey = Util.__testing._buildCommandForConfigKey;
 
 describe("CommandlineUtils", () => {
-  vi.mock("../../src/ts/config-metadata", () => ({ configMetadata: [] }));
+  vi.mock("../../src/ts/config/metadata", () => ({ configMetadata: [] }));
   vi.mock("../../src/ts/commandline/commandline-metadata", () => ({
     commandlineConfigMetadata: [],
   }));

frontend/__tests__/controllers/preset-controller.spec.ts

@@ -2,7 +2,11 @@ import { describe, it, expect, beforeEach, vi } from "vitest";
 import * as PresetController from "../../src/ts/controllers/preset-controller";
 import { Preset } from "@monkeytype/schemas/presets";
 import * as DB from "../../src/ts/db";
-import * as UpdateConfig from "../../src/ts/config";
+import { setConfig } from "../../src/ts/config/setters";
+import { Config } from "../../src/ts/config/store";
+import * as Lifecycle from "../../src/ts/config/lifecycle";
+import * as ConfigUtils from "../../src/ts/config/utils";
+import * as Persistence from "../../src/ts/config/persistence";
 import * as Notifications from "../../src/ts/states/notifications";
 import * as TestLogic from "../../src/ts/test/test-logic";
 import * as TagController from "../../src/ts/controllers/tag-controller";
@@ -16,13 +20,13 @@ describe("PresetController", () => {
       //
     }));
     const dbGetSnapshotMock = vi.spyOn(DB, "getSnapshot");
-    const configApplyMock = vi.spyOn(UpdateConfig, "applyConfig");
+    const configApplyMock = vi.spyOn(Lifecycle, "applyConfig");
     const configSaveFullConfigMock = vi.spyOn(
-      UpdateConfig,
+      Persistence,
       "saveFullConfigToLocalStorage",
     );
     const configGetConfigChangesMock = vi.spyOn(
-      UpdateConfig,
+      ConfigUtils,
       "getConfigChanges",
     );
     const notificationAddMock = vi.spyOn(
@@ -111,8 +115,8 @@ describe("PresetController", () => {
         settingGroups: ["test"],
       });
 
-      UpdateConfig.setConfig("numbers", true);
-      const oldConfig = structuredClone(UpdateConfig.default);
+      setConfig("numbers", true);
+      const oldConfig = structuredClone(Config);
 
       //WHEN
       await PresetController.apply(preset._id);

frontend/__tests__/controllers/url-handler.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, vi } from "vitest";
 import { Difficulty, Mode, Mode2 } from "@monkeytype/schemas/shared";
 import { compressToURI } from "lz-ts";
-import * as UpdateConfig from "../../src/ts/config";
+import * as UpdateConfig from "../../src/ts/config/setters";
 import * as Notifications from "../../src/ts/states/notifications";
 import * as TestLogic from "../../src/ts/test/test-logic";
 import * as TestState from "../../src/ts/test/test-state";

frontend/__tests__/input/helpers/fail-or-finish.spec.ts

@@ -4,7 +4,7 @@ import {
   checkIfFailedDueToDifficulty,
   checkIfFinished,
 } from "../../../src/ts/input/helpers/fail-or-finish";
-import { __testing } from "../../../src/ts/config";
+import { __testing } from "../../../src/ts/config/testing";
 import * as Misc from "../../../src/ts/utils/misc";
 import * as TestLogic from "../../../src/ts/test/test-logic";
 import * as Strings from "../../../src/ts/utils/strings";

frontend/__tests__/input/helpers/validation.spec.ts

@@ -3,7 +3,7 @@ import {
   isCharCorrect,
   shouldInsertSpaceCharacter,
 } from "../../../src/ts/input/helpers/validation";
-import { __testing } from "../../../src/ts/config";
+import { __testing } from "../../../src/ts/config/testing";
 import * as FunboxList from "../../../src/ts/test/funbox/list";
 import * as Strings from "../../../src/ts/utils/strings";
 

frontend/__tests__/root/config-metadata.spec.ts

@@ -1,9 +1,10 @@
 import { describe, it, expect, afterAll, vi } from "vitest";
-import { configMetadata } from "../../src/ts/config-metadata";
-import * as Config from "../../src/ts/config";
+import { configMetadata } from "../../src/ts/config/metadata";
+import { __testing } from "../../src/ts/config/testing";
+import { setConfig } from "../../src/ts/config/setters";
 import { ConfigKey, Config as ConfigType } from "@monkeytype/schemas/configs";
 
-const { replaceConfig, getConfig } = Config.__testing;
+const { replaceConfig, getConfig } = __testing;
 
 type TestsByConfig<T> = Partial<{
   [K in keyof ConfigType]: (T & { value: ConfigType[K] })[];
@@ -138,7 +139,7 @@ describe("ConfigMeta", () => {
         replaceConfig(given ?? {});
 
         //WHEN
-        Config.setConfig(key, value as any);
+        setConfig(key, value as any);
 
         //THEN
         expect(getConfig()).toMatchObject(expected);
@@ -175,7 +176,7 @@ describe("ConfigMeta", () => {
         replaceConfig(given ?? {});
 
         //WHEN
-        const applied = Config.setConfig(key, value as any);
+        const applied = setConfig(key, value as any);
 
         //THEN
         expect(applied).toEqual(!fail);
@@ -335,7 +336,7 @@ describe("ConfigMeta", () => {
         replaceConfig(given);
 
         //WHEN
-        Config.setConfig(key, value as any);
+        setConfig(key, value as any);
 
         //THEN
         expect(getConfig()).toMatchObject(expected ?? {});

frontend/__tests__/root/config.spec.ts

@@ -1,5 +1,8 @@
 import { describe, it, expect, beforeEach, afterAll, vi } from "vitest";
-import * as Config from "../../src/ts/config";
+import * as Config from "../../src/ts/config/setters";
+import * as Lifecycle from "../../src/ts/config/lifecycle";
+import * as ConfigUtils from "../../src/ts/config/utils";
+import { __testing } from "../../src/ts/config/testing";
 import * as Misc from "../../src/ts/utils/misc";
 import * as Env from "../../src/ts/utils/env";
 import {
@@ -8,11 +11,11 @@ import {
   CaretStyleSchema,
 } from "@monkeytype/schemas/configs";
 import * as FunboxValidation from "../../src/ts/test/funbox/funbox-validation";
-import * as ConfigValidation from "../../src/ts/config-validation";
+import * as ConfigValidation from "../../src/ts/config/validation";
 import * as ConfigEvent from "../../src/ts/observables/config-event";
 import * as ApeConfig from "../../src/ts/ape/config";
 import * as Notifications from "../../src/ts/states/notifications";
-const { replaceConfig, getConfig } = Config.__testing;
+const { replaceConfig, getConfig } = __testing;
 
 describe("Config", () => {
   const isDevEnvironmentMock = vi.spyOn(Env, "isDevEnvironment");
@@ -281,7 +284,7 @@ describe("Config", () => {
       replaceConfig({
         mode: "words",
       });
-      await Config.applyConfig({
+      await Lifecycle.applyConfig({
         numbers: true,
         punctuation: true,
       });
@@ -326,7 +329,7 @@ describe("Config", () => {
       ];
 
       it.each(testCases)("$display", async ({ value, expected }) => {
-        await Config.applyConfig(value);
+        await Lifecycle.applyConfig(value);
 
         const config = getConfig();
         const applied = Object.fromEntries(
@@ -363,7 +366,7 @@ describe("Config", () => {
       ];
 
       it.each(testCases)("$display", async ({ value, expected }) => {
-        await Config.applyConfig(value);
+        await Lifecycle.applyConfig(value);
         const config = getConfig();
         const applied = Object.fromEntries(
           Object.entries(config).filter(([key]) =>
@@ -378,8 +381,8 @@ describe("Config", () => {
       replaceConfig({
         numbers: true,
       });
-      await Config.applyConfig({
-        ...Config.getConfigChanges(),
+      await Lifecycle.applyConfig({
+        ...ConfigUtils.getConfigChanges(),
         punctuation: true,
       });
       const config = getConfig();
@@ -390,7 +393,7 @@ describe("Config", () => {
       replaceConfig({
         minWpm: "off",
       });
-      await Config.applyConfig({
+      await Lifecycle.applyConfig({
         minWpmCustomSpeed: 100,
       });
       const config = getConfig();
@@ -402,7 +405,7 @@ describe("Config", () => {
       replaceConfig({
         minWpm: "off",
       });
-      await Config.applyConfig({
+      await Lifecycle.applyConfig({
         minWpm: "custom",
         minWpmCustomSpeed: 100,
       });
@@ -413,7 +416,7 @@ describe("Config", () => {
 
     it("should keep the keymap off when applying keymapLayout", async () => {
       replaceConfig({});
-      await Config.applyConfig({
+      await Lifecycle.applyConfig({
         keymapLayout: "qwerty",
       });
       const config = getConfig();

frontend/__tests__/test/british-english.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from "vitest";
 import { replace } from "../../src/ts/test/british-english";
-import Config from "../../src/ts/config";
+import { Config } from "../../src/ts/config/store";
 
 describe("british-english", () => {
   describe("replace", () => {

frontend/__tests__/utils/config.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { getDefaultConfig } from "../../src/ts/constants/default-config";
-import { migrateConfig } from "../../src/ts/utils/config";
+import { migrateConfig } from "../../src/ts/config/utils";
 import { PartialConfig } from "@monkeytype/schemas/configs";
 
 const defaultConfig = getDefaultConfig();

frontend/src/ts/auth.tsx

@@ -10,7 +10,7 @@ import {
 
 import Ape from "./ape";
 import { showRegisterCaptchaModal } from "./components/modals/RegisterCaptchaModal";
-import { updateFromServer as updateConfigFromServer } from "./config";
+import { updateFromServer as updateConfigFromServer } from "./config/remote";
 import * as DB from "./db";
 import {
   isAuthAvailable,