From 80173acd2499cc15bc1a5765098e9e7c64896be8 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Fri, 12 Dec 2025 21:40:34 +0100
Subject: [PATCH] move resize, add metadata

---
 frontend/src/ts/config.ts                   | 12 ++++--------
 frontend/src/ts/observables/config-event.ts | 21 ++++++++++++++++-----
 frontend/src/ts/test/test-ui.ts             |  6 +++++-
 frontend/src/ts/utils/misc.ts               |  4 ----
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
index 6757b9c97..30323e23c 100644
--- a/frontend/src/ts/config.ts
+++ b/frontend/src/ts/config.ts
@@ -12,7 +12,6 @@ import {
   createErrorMessage,
   isObject,
   promiseWithResolvers,
-  triggerResize,
   typedKeys,
 } from "./utils/misc";
 import * as ConfigSchemas from "@monkeytype/schemas/configs";
@@ -227,17 +226,13 @@ export function setConfig<T extends keyof Config>(
   if (!options?.nosave) saveToLocalStorage(key, options?.nosave);
 
   if (!options?.noevent) {
-    // @ts-expect-error i can't figure this out
     ConfigEvent.dispatch({
       key: key,
       newValue: value,
       nosave: options?.nosave ?? false,
-      previousValue: previousValue as Config[T],
-    });
-  }
-
-  if (metadata.triggerResize && !options?.nosave) {
-    triggerResize();
+      previousValue: previousValue,
+      metadata,
+    } as ConfigEvent.ConfigEventOptions);
   }
 
   metadata.afterSet?.({
@@ -276,6 +271,7 @@ export function toggleFunbox(funbox: FunboxName, nosave?: boolean): boolean {
     newValue: config.funbox,
     nosave,
     previousValue,
+    metadata: configMetadata.funbox,
   });
 
   return true;
diff --git a/frontend/src/ts/observables/config-event.ts b/frontend/src/ts/observables/config-event.ts
index e4f978c57..536d8be7f 100644
--- a/frontend/src/ts/observables/config-event.ts
+++ b/frontend/src/ts/observables/config-event.ts
@@ -1,4 +1,5 @@
 import { Config } from "@monkeytype/schemas/configs";
+import { ConfigMetadata } from "../config-metadata";
 
 export type ConfigEventKey =
   | keyof Config
@@ -6,16 +7,26 @@ export type ConfigEventKey =
   | "fullConfigChangeFinished"
   | "configApplied";
 
-type SubscribeParams = {
+export type ConfigEventOptions = {
   nosave?: boolean;
   fullConfig?: Config;
 } & {
   [K in ConfigEventKey]?: K extends keyof Config
-    ? { key: K; newValue: Config[K]; previousValue: Config[K] }
-    : { key: K; newValue?: undefined; previousValue?: undefined };
+    ? {
+        key: K;
+        newValue: Config[K];
+        previousValue: Config[K];
+        metadata: ConfigMetadata<K>;
+      }
+    : {
+        key: K;
+        newValue?: undefined;
+        previousValue?: undefined;
+        metadata?: undefined;
+      };
 }[ConfigEventKey];
 
-type SubscribeFunction = (options: SubscribeParams) => void;
+type SubscribeFunction = (options: ConfigEventOptions) => void;
 
 const subscribers: SubscribeFunction[] = [];
 
@@ -23,7 +34,7 @@ export function subscribe(fn: SubscribeFunction): void {
   subscribers.push(fn);
 }
 
-export function dispatch(options: SubscribeParams): void {
+export function dispatch(options: ConfigEventOptions): void {
   console.log("dispatching config event", options);
   subscribers.forEach((fn) => {
     try {
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index ffaa1f380..69cba3417 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -2032,7 +2032,11 @@ $("#wordsWrapper").on("click", () => {
   focusWords();
 });
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+ConfigEvent.subscribe(({ key, newValue, metadata }) => {
+  if (metadata?.triggerResize) {
+    document.dispatchEvent(new Event("resize"));
+  }
+
   if (key === "configApplied") {
     $(
       "#caret, #paceCaret, #liveStatsMini, #typingTest, #wordsInput, #compositionDisplay",
diff --git a/frontend/src/ts/utils/misc.ts b/frontend/src/ts/utils/misc.ts
index e3e17c6a7..fb4c64b88 100644
--- a/frontend/src/ts/utils/misc.ts
+++ b/frontend/src/ts/utils/misc.ts
@@ -680,10 +680,6 @@ export function debounceUntilResolved<TArgs extends unknown[], TResult>(
   };
 }
 
-export function triggerResize(): void {
-  $(window).trigger("resize");
-}
-
 export type RequiredProperties<T, K extends keyof T> = Omit<T, K> &
   Required<Pick<T, K>>;