From 2835a02bbbb71664cc4c0407513efc83ea58a2c4 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Fri, 18 Apr 2025 20:31:48 +0200
Subject: [PATCH] impr: add type safety to the config event observable

!nuf
---
 frontend/src/ts/config.ts                     |  2 +-
 frontend/src/ts/elements/modes-notice.ts      | 33 +++++++++----------
 .../src/ts/elements/settings/theme-picker.ts  |  1 -
 frontend/src/ts/observables/config-event.ts   | 18 ++++++++--
 frontend/src/ts/test/test-logic.ts            |  2 +-
 5 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
index 418d6645c..c56bf1cd3 100644
--- a/frontend/src/ts/config.ts
+++ b/frontend/src/ts/config.ts
@@ -1901,7 +1901,7 @@ export function setCustomLayoutfluid(
   const customLayoutfluid = trimmed.replace(/ /g, "#");
   config.customLayoutfluid = customLayoutfluid;
   saveToLocalStorage("customLayoutfluid", nosave);
-  ConfigEvent.dispatch("customLayoutFluid", config.customLayoutfluid);
+  ConfigEvent.dispatch("customLayoutfluid", config.customLayoutfluid);
 
   return true;
 }
diff --git a/frontend/src/ts/elements/modes-notice.ts b/frontend/src/ts/elements/modes-notice.ts
index 9f20b7058..4e28cfee1 100644
--- a/frontend/src/ts/elements/modes-notice.ts
+++ b/frontend/src/ts/elements/modes-notice.ts
@@ -12,23 +12,22 @@ import Format from "../utils/format";
 import { getActiveFunboxNames } from "../test/funbox/list";
 
 ConfigEvent.subscribe((eventKey) => {
-  if (
-    [
-      "difficulty",
-      "blindMode",
-      "stopOnError",
-      "paceCaret",
-      "minWpm",
-      "minAcc",
-      "minBurst",
-      "confidenceMode",
-      "layout",
-      "showAverage",
-      "typingSpeedUnit",
-      "quickRestart",
-      "changeCustomPolyglot",
-    ].includes(eventKey)
-  ) {
+  const configKeys: ConfigEvent.ConfigEventKey[] = [
+    "difficulty",
+    "blindMode",
+    "stopOnError",
+    "paceCaret",
+    "minWpm",
+    "minAcc",
+    "minBurst",
+    "confidenceMode",
+    "layout",
+    "showAverage",
+    "typingSpeedUnit",
+    "quickRestart",
+    "customPolyglot",
+  ];
+  if (configKeys.includes(eventKey)) {
     void update();
   }
 });
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 440c83d9d..b116b5953 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -479,7 +479,6 @@ $(".pageSettings #saveCustomThemeButton").on("click", async () => {
 });
 
 ConfigEvent.subscribe((eventKey) => {
-  if (eventKey === "customThemeId") void refreshButtons();
   if (eventKey === "theme" && ActivePage.get() === "settings") {
     updateActiveButton();
   }
diff --git a/frontend/src/ts/observables/config-event.ts b/frontend/src/ts/observables/config-event.ts
index 497b1d1fb..370479dae 100644
--- a/frontend/src/ts/observables/config-event.ts
+++ b/frontend/src/ts/observables/config-event.ts
@@ -1,7 +1,19 @@
-import { Config, ConfigValue } from "@monkeytype/contracts/schemas/configs";
+import {
+  Config,
+  ConfigKey,
+  ConfigValue,
+} from "@monkeytype/contracts/schemas/configs";
+
+export type ConfigEventKey =
+  | ConfigKey
+  | "saveToLocalStorage"
+  | "setThemes"
+  | "configApplied"
+  | "fullConfigChange"
+  | "fullConfigChangeFinished";
 
 type SubscribeFunction = (
-  key: string,
+  key: ConfigEventKey,
   newValue?: ConfigValue,
   nosave?: boolean,
   previousValue?: ConfigValue,
@@ -15,7 +27,7 @@ export function subscribe(fn: SubscribeFunction): void {
 }
 
 export function dispatch(
-  key: string,
+  key: ConfigEventKey,
   newValue?: ConfigValue,
   nosave?: boolean,
   previousValue?: ConfigValue,
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index c9f49cea9..8b077cbca 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -1432,7 +1432,7 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
     }
     if (eventKey === "difficulty" && !nosave) restart();
     if (
-      eventKey === "customLayoutFluid" &&
+      eventKey === "customLayoutfluid" &&
       Config.funbox.includes("layoutfluid")
     ) {
       restart();