diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 7e7e236c..473d7dc0 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -107,7 +107,20 @@ "title": "Captions" }, "connections": { - "title": "Connections" + "title": "Connections", + "workers": { + "label": "Use custom proxy workers", + "description": "To make the application function, all traffic is routed through proxies. Enable this if you want to bring your own workers.", + "urlLabel": "Worker URLs", + "emptyState": "No workers yet, add one below", + "urlPlaceholder": "https://", + "addButton": "Add new worker" + }, + "server": { + "label": "Custom server", + "description": "To make the application function, all traffic is routed through proxies. Enable this if you want to bring your own workers.", + "urlLabel": "Custom server URL" + } } }, "faq": { diff --git a/src/pages/parts/settings/ConnectionsPart.tsx b/src/pages/parts/settings/ConnectionsPart.tsx index 0e395ebc..eb370093 100644 --- a/src/pages/parts/settings/ConnectionsPart.tsx +++ b/src/pages/parts/settings/ConnectionsPart.tsx @@ -1,4 +1,5 @@ import { Dispatch, SetStateAction, useCallback } from "react"; +import { useTranslation } from "react-i18next"; import { Button } from "@/components/buttons/Button"; import { Toggle } from "@/components/buttons/Toggle"; @@ -19,6 +20,7 @@ interface BackendEditProps { } function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) { + const { t } = useTranslation(); const add = useCallback(() => { setProxyUrls((s) => [...(s ?? []), ""]); }, [setProxyUrls]); @@ -46,10 +48,11 @@ function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) {
-

Use custom proxy workers

+

+ {t("settings.connections.workers.label")} +

- To make the application function, all traffic is routed through - proxies. Enable this if you want to bring your own workers. + {t("settings.connections.workers.description")}

@@ -62,11 +65,13 @@ function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) { {proxyUrls !== null ? ( <> -

Worker URLs

+

+ {t("settings.connections.workers.urlLabel")} +

{(proxyUrls?.length ?? 0) === 0 ? ( -

No workers yet, add one below

+

{t("settings.connections.workers.emptyState")}

) : null} {(proxyUrls ?? []).map((v, i) => (
changeItem(i, val)} - placeholder="https://" + placeholder={ + t("settings.connections.workers.urlPlaceholder") ?? + undefined + } /> ) : null} @@ -101,14 +109,16 @@ function ProxyEdit({ proxyUrls, setProxyUrls }: ProxyEditProps) { } function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) { + const { t } = useTranslation(); return (
-

Custom server

+

+ {t("settings.connections.workers.label")} +

- To make the application function, all traffic is routed through - proxies. Enable this if you want to bring your own workers. + {t("settings.connections.workers.description")}

@@ -121,7 +131,9 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) { {backendUrl !== null ? ( <> -

Custom server URL

+

+ {t("settings.connections.workers.urlLabel")} +

) : null} @@ -130,9 +142,10 @@ function BackendEdit({ backendUrl, setBackendUrl }: BackendEditProps) { } export function ConnectionsPart(props: BackendEditProps & ProxyEditProps) { + const { t } = useTranslation(); return (
- Connections + {t("settings.connections.title")}