From 13c1b58b78353d7957ab89aaebe7c84568a2ca61 Mon Sep 17 00:00:00 2001
From: Daniel Lavrushin <lavrushin@gmail.com>
Date: Sat, 9 May 2026 17:09:56 +0200
Subject: [PATCH] fix: update language handling in settings and i18n
 integration

---
 changelog.md                                  |  2 +-
 src/http/ui/src/components/settings/Page.tsx  | 23 +++++++++++--------
 .../ui/src/components/settings/WebServer.tsx  |  6 ++---
 src/http/ui/src/i18n/index.ts                 | 20 ++++++++++++++--
 4 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/changelog.md b/changelog.md
index a0fa4286..04c8f569 100644
--- a/changelog.md
+++ b/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).
diff --git a/src/http/ui/src/components/settings/Page.tsx b/src/http/ui/src/components/settings/Page.tsx
index 95001691..4dd0be5c 100644
--- a/src/http/ui/src/components/settings/Page.tsx
+++ b/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();
diff --git a/src/http/ui/src/components/settings/WebServer.tsx b/src/http/ui/src/components/settings/WebServer.tsx
index e260152b..40b6aea8 100644
--- a/src/http/ui/src/components/settings/WebServer.tsx
+++ b/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 (
diff --git a/src/http/ui/src/i18n/index.ts b/src/http/ui/src/i18n/index.ts
index 9b1f32e4..b9f7fc6e 100644
--- a/src/http/ui/src/i18n/index.ts
+++ b/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;