fix(web): the prompt box follows the interface font size

apps/web/src/appInit.tsx

@@ -1,9 +1,10 @@
 import { scopedThreadKey, scopeThreadRef } from "@t3tools/client-runtime/environment";
 import type { ClientSettings } from "@t3tools/contracts/settings";
 import { createBrowserHistory, createHashHistory } from "@tanstack/react-router";
+import * as Schema from "effect/Schema";
 
 import { applyAppearanceContrast } from "./appearanceContrast";
-import { applyAppearanceFontVariables } from "./appearanceFonts";
+import { applyAppearanceFontVariables, TYPOGRAPHY_ADVANCED_STORAGE_KEY } from "./appearanceFonts";
 import { startElectronBrowserHost } from "./browser/ElectronBrowserHost";
 import { startBrowserProfileReporting } from "./browser/BrowserProfileReporter";
 import { startPreviewTitleRecording } from "./browserHistoryStore";
@@ -30,6 +31,7 @@ import {
 } from "./composerDraftStore";
 import { startDefaultThemeAdoption } from "./hooks/useDefaultTheme";
 import { startEnvironmentThemeRepaint } from "./hooks/useEnvironmentTheme";
+import { readLocalStorageValue, subscribeLocalStorageKey } from "./hooks/useLocalStorage";
 import {
   getClientSettings,
   startModelPreferencesMigration,
@@ -58,10 +60,18 @@ import { resolveThreadRouteTarget } from "./threadRoutes";
 function startClientAppearance(): void {
   const root = document.documentElement;
   let applied: ClientSettings | null = null;
+  let appliedSeparateFonts: boolean | null = null;
   const apply = () => {
     const settings = getClientSettings();
     const previous = applied;
     applied = settings;
+    const separateFonts = readLocalStorageValue(
+      TYPOGRAPHY_ADVANCED_STORAGE_KEY,
+      false,
+      Schema.Boolean,
+    );
+    const previousSeparateFonts = appliedSeparateFonts;
+    appliedSeparateFonts = separateFonts;
     if (previous?.diffColorScheme !== settings.diffColorScheme) {
       root.dataset.diffColorScheme = settings.diffColorScheme;
     }
@@ -86,7 +96,8 @@ function startClientAppearance(): void {
       previous.fontSizeInterface !== settings.fontSizeInterface ||
       previous.fontSizePrompt !== settings.fontSizePrompt ||
       previous.fontSizeCode !== settings.fontSizeCode ||
-      previous.fontSmoothing !== settings.fontSmoothing
+      previous.fontSmoothing !== settings.fontSmoothing ||
+      previousSeparateFonts !== separateFonts
     ) {
       applyAppearanceFontVariables(root, {
         sans: settings.fontFamilySans,
@@ -96,10 +107,12 @@ function startClientAppearance(): void {
         sizePrompt: settings.fontSizePrompt,
         sizeCode: settings.fontSizeCode,
         smoothing: settings.fontSmoothing,
+        separate: separateFonts,
       });
     }
   };
   subscribeClientSettings(apply);
+  subscribeLocalStorageKey(TYPOGRAPHY_ADVANCED_STORAGE_KEY, apply);
   apply();
 }
 

apps/web/src/appearanceFonts.browser.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import "~/index.css";
+import { applyAppearanceFontVariables } from "./appearanceFonts";
+
+function renderedFontSize(style: (probe: HTMLElement) => void): string {
+  const probe = document.createElement("div");
+  style(probe);
+  document.body.append(probe);
+  try {
+    return getComputedStyle(probe).fontSize;
+  } finally {
+    probe.remove();
+  }
+}
+
+const composerFontSize = () =>
+  renderedFontSize((probe) => {
+    // The composer editor's own size class.
+    probe.className = "text-(length:--font-size-prompt,var(--text-sm))";
+  });
+
+const touchComposerFontSize = () =>
+  renderedFontSize((probe) => {
+    probe.style.fontSize = "var(--font-size-prompt-touch)";
+  });
+
+describe("applyAppearanceFontVariables", () => {
+  it("sizes the composer from the interface size until fonts are set separately", () => {
+    const root = document.documentElement;
+    const style = root.getAttribute("style");
+    const preferences = {
+      sans: "",
+      code: "",
+      composer: "",
+      sizeInterface: 20,
+      sizePrompt: 14,
+      sizeCode: 13,
+      smoothing: true,
+    };
+    try {
+      applyAppearanceFontVariables(root, { ...preferences, separate: false });
+      expect(composerFontSize()).toBe("17.5px");
+      expect(touchComposerFontSize()).toBe("17.5px");
+
+      applyAppearanceFontVariables(root, { ...preferences, separate: true });
+      expect(composerFontSize()).toBe("14px");
+      // iOS zooms into inputs under 16px.
+      expect(touchComposerFontSize()).toBe("16px");
+    } finally {
+      if (style === null) root.removeAttribute("style");
+      else root.setAttribute("style", style);
+    }
+  });
+});

apps/web/src/appearanceFonts.ts

@@ -66,17 +66,18 @@ export interface AppearanceFontPreferences {
   readonly sizePrompt: number;
   readonly sizeCode: number;
   readonly smoothing: boolean;
+  readonly separate: boolean;
 }
 
-/** Always writes sizes: interface size sets the root; prompt and code use pixels to avoid double scaling. */
+/** Interface size sets the root; prompt and code use pixels to avoid double scaling. */
 export function applyAppearanceFontVariables(
   root: HTMLElement,
   preferences: AppearanceFontPreferences,
 ): void {
   const families: ReadonlyArray<readonly [variable: string, custom: string, fallback: string]> = [
     ["--font-sans", preferences.sans, DEFAULT_SANS_FONT_STACK],
     ["--font-mono", preferences.code, DEFAULT_CODE_FONT_STACK],
-    ["--font-composer", preferences.composer, "var(--font-sans)"],
+    ["--font-composer", preferences.separate ? preferences.composer : "", "var(--font-sans)"],
   ];
   for (const [variable, custom, fallback] of families) {
     const list = cssFontFamilies(custom);
@@ -88,7 +89,10 @@ export function applyAppearanceFontVariables(
   }
 
   root.style.fontSize = `${clampInterfaceFontSize(preferences.sizeInterface)}px`;
-  root.style.setProperty("--font-size-prompt", `${clampPromptFontSize(preferences.sizePrompt)}px`);
+  root.style.setProperty(
+    "--font-size-prompt",
+    preferences.separate ? `${clampPromptFontSize(preferences.sizePrompt)}px` : "var(--text-sm)",
+  );
   const code = clampCodeFontSize(preferences.sizeCode);
   root.style.setProperty("--font-size-code", `${code}px`);
   root.style.setProperty("--diffs-font-size", `${code}px`);

apps/web/src/hooks/useLocalStorage.ts

@@ -123,6 +123,35 @@ function decodeOrInitial<T, E>(
   }
 }
 
+export function readLocalStorageValue<T, E>(
+  key: string,
+  initialValue: T,
+  schema: Schema.Codec<T, E>,
+): T {
+  return decodeOrInitial(key, schema, readSerializedValue(key), initialValue);
+}
+
+/** Fires on writes from this tab and from other tabs. */
+export function subscribeLocalStorageKey(key: string, onChange: () => void): () => void {
+  const handleStorageChange = (event: StorageEvent) => {
+    if (event.key === key) {
+      onChange();
+    }
+  };
+  const handleLocalChange = (event: CustomEvent<LocalStorageChangeDetail>) => {
+    if (event.detail.key === key) {
+      onChange();
+    }
+  };
+
+  window.addEventListener("storage", handleStorageChange);
+  window.addEventListener(LOCAL_STORAGE_CHANGE_EVENT, handleLocalChange as EventListener);
+  return () => {
+    window.removeEventListener("storage", handleStorageChange);
+    window.removeEventListener(LOCAL_STORAGE_CHANGE_EVENT, handleLocalChange as EventListener);
+  };
+}
+
 export function writeLocalStorageValue<T, E>(
   key: string,
   value: T | ((val: T) => T),
@@ -169,25 +198,7 @@ export function useLocalStorage<T, E>(
 ): [T, (value: T | ((val: T) => T)) => void] {
   const getSnapshot = () => readSerializedValue(key);
 
-  const subscribe = (onStoreChange: () => void) => {
-    const handleStorageChange = (event: StorageEvent) => {
-      if (event.key === key) {
-        onStoreChange();
-      }
-    };
-    const handleLocalChange = (event: CustomEvent<LocalStorageChangeDetail>) => {
-      if (event.detail.key === key) {
-        onStoreChange();
-      }
-    };
-
-    window.addEventListener("storage", handleStorageChange);
-    window.addEventListener(LOCAL_STORAGE_CHANGE_EVENT, handleLocalChange as EventListener);
-    return () => {
-      window.removeEventListener("storage", handleStorageChange);
-      window.removeEventListener(LOCAL_STORAGE_CHANGE_EVENT, handleLocalChange as EventListener);
-    };
-  };
+  const subscribe = (onStoreChange: () => void) => subscribeLocalStorageKey(key, onStoreChange);
 
   const serializedValue = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const storedValue = decodeOrInitial(key, schema, serializedValue, initialValue);