Merge pull request #8160 from QianKuang8/qian/fix-font-size

fix: font size setting input

Author: RomneyDa

gui/src/context/LocalStorage.tsx

@@ -18,13 +18,41 @@ export const LocalStorageProvider: React.FC<{ children: React.ReactNode }> = ({
 }) => {
   const [values, setValues] = useState<LocalStorageType>(DEFAULT_LOCAL_STORAGE);
 
-  // TODO setvalue
-  useEffect(() => {
+  // Helper function to sync state with localStorage
+  const syncWithLocalStorage = () => {
     const isJetbrains = getLocalStorage("ide") === "jetbrains";
-    let fontSize = getLocalStorage("fontSize") ?? (isJetbrains ? 15 : 14);
-    setValues({
+    const fontSize = getLocalStorage("fontSize") ?? (isJetbrains ? 15 : 14);
+
+    setValues((prev) => ({
+      ...prev,
       fontSize,
-    });
+    }));
+  };
+
+  // Initialize with values from localStorage
+  useEffect(() => {
+    syncWithLocalStorage();
+  }, []);
+
+  // Listen for current tab changes using CustomEvent
+  useEffect(() => {
+    const handleLocalStorageChange = (event: CustomEvent) => {
+      if (event.detail?.key === "fontSize") {
+        syncWithLocalStorage();
+      }
+    };
+
+    window.addEventListener(
+      "localStorageChange",
+      handleLocalStorageChange as EventListener,
+    );
+
+    return () => {
+      window.removeEventListener(
+        "localStorageChange",
+        handleLocalStorageChange as EventListener,
+      );
+    };
   }, []);
 
   return (

gui/src/pages/config/components/UserSetting.tsx

@@ -79,7 +79,40 @@ export function UserSetting(props: UserSettingProps) {
             <input
               type="number"
               value={props.value}
-              onChange={(e) => props.onChange(Number(e.target.value))}
+              onChange={(e) => {
+                const value = Number(e.target.value);
+                // Allow temporary invalid values during input
+                props.onChange(value);
+              }}
+              onBlur={(e) => {
+                // Apply min/max constraints when input loses focus
+                const value = Number(e.target.value);
+                const min = props.min ?? 0;
+                const max = props.max ?? 100;
+
+                if (value < min) {
+                  props.onChange(min);
+                } else if (value > max) {
+                  props.onChange(max);
+                }
+              }}
+              onKeyDown={(e) => {
+                // Apply constraints when user presses Enter
+                if (e.key === "Enter") {
+                  const value = Number(e.currentTarget.value);
+                  const min = props.min ?? 0;
+                  const max = props.max ?? 100;
+
+                  if (value < min) {
+                    props.onChange(min);
+                  } else if (value > max) {
+                    props.onChange(max);
+                  }
+
+                  // Blur the input to complete the editing
+                  e.currentTarget.blur();
+                }
+              }}
               min={props.min ?? 0}
               max={props.max ?? 100}
               disabled={disabled}

gui/src/util/localStorage.ts

@@ -49,4 +49,11 @@ export function setLocalStorage<T extends keyof LocalStorageTypes>(
   value: LocalStorageTypes[T],
 ): void {
   localStorage.setItem(key, JSON.stringify(value));
+
+  // Dispatch custom event to notify current tab listeners
+  window.dispatchEvent(
+    new CustomEvent("localStorageChange", {
+      detail: { key, value },
+    }),
+  );
 }