fix: update language handling in settings and i18n integration

changelog.md

@@ -1,6 +1,6 @@
 # B4 - Bye Bye Big Bro
 
-## [1.61.0] - 2026-05-09
+## [1.61.1] - 2026-05-09
 
 - ADDED: **Custom payload for UDP fake packets** - new "Fake Packet Payload" picker in the UDP fake settings of each set. Choose a captured `.bin` (uploaded in Settings → Payloads, or auto-captured from live QUIC traffic) to use as the body of fake UDP packets. Empty = zero fill (previous behavior). The Settings → Payloads upload form now has an explicit TLS/QUIC protocol selector.
 - ADDED: **Auto-generated QUIC Initial payload** - new "(auto: QUIC Initial)" option in the UDP Fake Packet Payload picker. b4 generates a fresh randomized QUIC Initial packet for every fake, with random connection IDs each time, so no upload is needed and the bytes can't be fingerprinted by repetition. Recommended packet size for this mode is 1200 bytes. Works with any Faking Strategy (None / TTL / Checksum).

src/http/ui/src/components/settings/Page.tsx

@@ -16,6 +16,7 @@ import {
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router";
 import { Trans, useTranslation } from "react-i18next";
+import i18n, { setLanguage } from "../../i18n";
 
 import {
   ApiIcon,
@@ -90,7 +91,7 @@ enum TABS {
 
 export function SettingsPage() {
   const { showError, showSuccess } = useSnackbar();
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const [config, setConfig] = useState<B4Config | null>(null);
   const [originalConfig, setOriginalConfig] = useState<B4Config | null>(null);
   const [loading, setLoading] = useState(true);
@@ -240,21 +241,25 @@ export function SettingsPage() {
       const data = await configApi.get();
       setConfig(data);
       setOriginalConfig(structuredClone(data));
-      const lang = data.system.web_server.language;
-      if (lang && lang !== i18n.language) {
-        void i18n.changeLanguage(lang);
-        localStorage.setItem("b4-language", lang);
-      }
+      return data;
     } catch (error) {
       console.error("Error loading configuration:", error);
-      showErrorRef.current(t("core.configLoadError"));
+      showErrorRef.current(i18n.t("core.configLoadError"));
+      return null;
     } finally {
       setLoading(false);
     }
-  }, [i18n, t]);
+  }, []);
 
   useEffect(() => {
-    loadConfig().catch(() => {});
+    let bootstrapped = false;
+    loadConfig()
+      .then((data) => {
+        if (bootstrapped || !data) return;
+        bootstrapped = true;
+        setLanguage(data.system.web_server.language ?? "en");
+      })
+      .catch(() => {});
   }, [loadConfig]);
 
   const { refresh: refreshAiStatus } = useAiStatus();

src/http/ui/src/components/settings/WebServer.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import { setLanguage } from "../../i18n";
 import { ApiIcon } from "@b4.icons";
 import {
   B4Alert,
@@ -24,13 +25,12 @@ export const WebServerSettings = ({
   config,
   onChange,
 }: WebServerSettingsProps) => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   const handleLanguageChange = (e: { target: { value: string | number } }) => {
     const lang = String(e.target.value);
     onChange("system.web_server.language", lang);
-    void i18n.changeLanguage(lang);
-    localStorage.setItem("b4-language", lang);
+    setLanguage(lang);
   };
 
   return (

src/http/ui/src/i18n/index.ts

@@ -4,18 +4,34 @@ import { initReactI18next } from "react-i18next";
 import en from "./en.json";
 import ru from "./ru.json";
 
-const cachedLang = localStorage.getItem("b4-language") || "en";
+const SUPPORTED = ["en", "ru"] as const;
+type Lang = (typeof SUPPORTED)[number];
+
+export const isSupportedLang = (v: unknown): v is Lang =>
+  typeof v === "string" && (SUPPORTED as readonly string[]).includes(v);
+
+const initial: Lang = (() => {
+  const cached = localStorage.getItem("b4-language");
+  return isSupportedLang(cached) ? cached : "en";
+})();
 
 void i18n.use(initReactI18next).init({
   resources: {
     en: { translation: en },
     ru: { translation: ru },
   },
-  lng: cachedLang,
+  lng: initial,
   fallbackLng: "en",
   interpolation: {
     escapeValue: false,
   },
 });
 
+export const setLanguage = (lang: string) => {
+  if (!isSupportedLang(lang)) return;
+  if (i18n.language === lang) return;
+  void i18n.changeLanguage(lang);
+  localStorage.setItem("b4-language", lang);
+};
+
 export default i18n;