fix: update translation handling in ConnectionsPage, LogsPage, SetsPage, and SystemInfoDialog components

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

@@ -19,12 +19,13 @@ import {
   stripPort,
 } from "@utils";
 import { colors } from "@design";
-import { useWebSocket } from "../../context/B4WsProvider";
+import { useWebSocket } from "@context/B4WsProvider";
 import { AddIpModal } from "./AddIpModal";
 import { B4Config, B4SetConfig } from "@models/config";
 import { useSnackbar } from "@context/SnackbarProvider";
 import { devicesApi } from "@b4.devices";
 import { useTranslation } from "react-i18next";
+import i18n from "@/i18n";
 
 interface RipeNetworkInfo {
   asns: string[];
@@ -259,14 +260,14 @@ export function ConnectionsPage() {
         e.preventDefault();
         clearDomains();
         resetDomainsBadge();
-        showSuccess(t("connections.page.clearedAll"));
+        showSuccess(i18n.t("connections.page.clearedAll"));
       } else if (e.key === "p" || e.key === "Pause") {
         e.preventDefault();
         setPauseDomains(!pauseDomains);
         showSuccess(
           pauseDomains
-            ? t("connections.page.resumed")
-            : t("connections.page.paused"),
+            ? i18n.t("connections.page.resumed")
+            : i18n.t("connections.page.paused"),
         );
       }
     },
@@ -274,7 +275,6 @@ export function ConnectionsPage() {
       clearDomains,
       resetDomainsBadge,
       showSuccess,
-      t,
       setPauseDomains,
       pauseDomains,
     ],

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

@@ -13,6 +13,7 @@ import { colors, fonts, glows } from "@design";
 import { useWebSocket } from "@context/B4WsProvider";
 import { useSnackbar } from "@context/SnackbarProvider";
 import { useTranslation } from "react-i18next";
+import i18n from "@/i18n";
 
 export function LogsPage() {
   const { t } = useTranslation();
@@ -67,14 +68,14 @@ export function LogsPage() {
       if ((e.ctrlKey && e.key === "x") || e.key === "Delete") {
         e.preventDefault();
         clearLogs();
-        showSuccess(t("logs.cleared"));
+        showSuccess(i18n.t("logs.cleared"));
       } else if (e.key === "p" || e.key === "Pause") {
         e.preventDefault();
         setPauseLogs(!pauseLogs);
-        showSuccess(pauseLogs ? t("logs.resumed") : t("logs.paused"));
+        showSuccess(pauseLogs ? i18n.t("logs.resumed") : i18n.t("logs.paused"));
       }
     },
-    [clearLogs, pauseLogs, setPauseLogs, showSuccess, t],
+    [clearLogs, pauseLogs, setPauseLogs, showSuccess],
   );
 
   useEffect(() => {

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

@@ -15,6 +15,7 @@ import {
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Navigate, Route, Routes, useNavigate, useParams } from "react-router";
 import { useTranslation } from "react-i18next";
+import i18n from "@/i18n";
 import { SetEditorPage } from "./Editor";
 import { SetStats, SetWithStats, SetsManager } from "./Manager";
 
@@ -123,14 +124,14 @@ export function SetsPage() {
       };
       setConfig(data);
     } catch {
-      showError(t("core.configLoadError"));
+      showError(i18n.t("core.configLoadError"));
     } finally {
       if (!initialLoadDone.current) {
         setLoading(false);
         initialLoadDone.current = true;
       }
     }
-  }, [showError, t]);
+  }, [showError]);
 
   useEffect(() => {
     loadConfig().catch(() => {});

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

@@ -8,6 +8,7 @@ import {
   Chip,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import i18n from "@/i18n";
 import {
   InfoIcon,
   CheckIcon,
@@ -135,11 +136,11 @@ export const SystemInfoDialog = ({ open, onClose }: SystemInfoDialogProps) => {
       .then((r) => r.json())
       .then((json: { success: boolean; data: Diagnostics }) => {
         if (json.success) setData(json.data);
-        else setError(t("settings.SystemInfo.loadFailed"));
+        else setError(i18n.t("settings.SystemInfo.loadFailed"));
       })
-      .catch(() => setError(t("settings.SystemInfo.connectFailed")))
+      .catch(() => setError(i18n.t("settings.SystemInfo.connectFailed")))
       .finally(() => setLoading(false));
-  }, [open, t]);
+  }, [open]);
 
   const statusChip = (status: string) => {
     const isOk = status === "loaded" || status === "built-in";

src/http/ui/tsconfig.json

@@ -12,6 +12,7 @@
     "skipLibCheck": true,
     "noImplicitAny": true,
     "paths": {
+      "@/*": ["./src/*"],
       "@design": ["./src/design/index.ts"],
       "@hooks/*": ["./src/hooks/*"],
       "@utils": ["./src/utils/index.ts"],