From ac4dc23e0808e6fea4cf75c4e096f4d33a94849c Mon Sep 17 00:00:00 2001 From: Manuel Ruwe Date: Thu, 18 Aug 2022 21:46:46 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20wip=20extract=20to=20translation?= =?UTF-8?q?s=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/de-de.json | 385 ++++++++++++++++++ public/locales/en-us.json | 385 ++++++++++++++++++ src/components/AppShelf/AddAppShelfItem.tsx | 180 ++++++-- .../ColorSchemeToggle/ColorSchemeSwitch.tsx | 5 +- src/components/Config/ConfigChanger.tsx | 3 +- src/components/Config/SaveConfig.tsx | 35 +- src/components/Settings/AdvancedSettings.tsx | 23 +- src/components/Settings/ColorSelector.tsx | 7 +- src/components/Settings/CommonSettings.tsx | 20 +- src/components/Settings/Credits.tsx | 4 +- src/components/Settings/LanguageSwitch.tsx | 78 ++++ src/components/Settings/ModuleEnabler.tsx | 3 +- src/components/Settings/OpacitySelector.tsx | 3 +- src/components/Settings/SettingsMenu.tsx | 10 +- src/components/Settings/ShadeSelector.tsx | 3 +- .../WidgetsPositionSwitch.tsx | 3 +- src/modules/calendar/CalendarModule.tsx | 8 +- src/modules/common/MediaDisplay.tsx | 5 +- src/modules/dashdot/DashdotModule.tsx | 37 +- src/modules/docker/DockerModule.tsx | 8 +- src/modules/docker/DockerTable.tsx | 16 +- src/modules/downloads/DownloadsModule.tsx | 15 +- src/modules/overseerr/RequestModal.tsx | 31 +- src/modules/ping/PingModule.tsx | 7 +- src/modules/search/SearchModule.tsx | 4 +- src/modules/weather/WeatherModule.tsx | 35 +- src/pages/_app.tsx | 7 +- src/providers/translation.provider.tsx | 16 + src/translations/i18n.ts | 36 ++ 29 files changed, 1216 insertions(+), 156 deletions(-) create mode 100644 public/locales/de-de.json create mode 100644 public/locales/en-us.json create mode 100644 src/components/Settings/LanguageSwitch.tsx create mode 100644 src/providers/translation.provider.tsx create mode 100644 src/translations/i18n.ts diff --git a/public/locales/de-de.json b/public/locales/de-de.json new file mode 100644 index 000000000..331c956e6 --- /dev/null +++ b/public/locales/de-de.json @@ -0,0 +1,385 @@ +{ + "settings": { + "title": "Einstellungen", + "tooltip": "Einstellungen", + "tabs": { + "common": { + "title": "Allgemein", + "settings": { + "searchEngine": { + "title": "Suchmaschine", + "tips": { + "generalTip": "Benutze die Prefixe !yt und !t vor deiner Suchanfrage um auf Youtube oder nach einem Torrent zu suchen.", + "placeholderTip": "%s can be used as a placeholder for the query." + }, + "customEngine": { + "label": "Suchadresse", + "placeholder": "Benutzerdefinierte Adresse" + } + }, + "colorScheme": { + "label": "Wechseln zu {{scheme}} Modus" + }, + "widgetsPositionSwitch": { + "label": "Positionieren von Widgets auf linker Seite" + }, + "moduleEnabler": { + "title": "Modul Enabler" + }, + "language": { + "title": "Sprache" + }, + "configChanger": { + "configSelect": { + "label": "Konfigurations Lader" + }, + "modal": { + "title": "Choose the name of your new config", + "form": { + "configName": { + "label": "Config name", + "placeholder": "Your new config name" + }, + "buttons:": { + "submit": "Confirm" + } + } + }, + "buttons": { + "download": "Konfiguration herunterladen", + "delete": { + "text": "Konfiguration löschen", + "notifications": { + "deleted": { + "title": "Config deleted", + "message": "Config deleted" + }, + "deleteFailed": { + "title": "Config delete failed", + "message": "Config delete failed" + } + } + }, + "saveCopy": "Kopie speichern" + } + }, + "configTip": "Lade deine Konfiguration hoch, indem du sie per drag-and-drop auf die Seite ziehst." + } + }, + "customizations": { + "title": "Anpassungen", + "settings": { + "opacitySelector": { + "label": "App Opacity" + }, + "colorSelector": { + "suffix": "{{color}} color" + }, + "shadeSelector": { + "label": "Shade" + }, + "pageTitle": { + "label": "Page Title", + "placeholder": "Homarr 🦞" + }, + "logo": { + "label": "Logo", + "placeholder": "/img/logo.png" + }, + "favicon": { + "label": "Favicon", + "placeholder": "/favicon.png" + }, + "background": { + "label": "Background", + "placeholder": "/img/background.png" + }, + "buttons": { + "submit": "Save" + } + } + } + }, + "credits": { + "madeWithLove": "Gemacht mit ❤️ von @" + } + }, + "layout": { + "header": { + "search": { + "input": { + "placeholder": "Search the web..." + } + }, + "docker": { + "errors": { + "integrationFailed": { + "title": "Docker integration failed", + "message": "Did you forget to mount the docker socket ?" + } + }, + "actionIcon": { + "tooltip": "Docker" + } + }, + "addService": { + "actionIcon": { + "tooltip": "Add a service" + }, + "modal": { + "title": "Add service", + "form": { + "validation": { + "invalidUrl": "Please enter a valid URL", + "noStatusCodeSelected": "Please select a status code" + } + }, + "tabs": { + "options": { + "title": "Options", + "form": { + "serviceName": { + "label": "Service name", + "placeholder": "Plex" + }, + "iconUrl": { + "label": "Icon URL" + }, + "serviceUrl": { + "label": "Service URL" + }, + "onClickUrl": { + "label": "On Click URL" + }, + "serviceType": { + "label": "Service type", + "defaultValue": "Other", + "placeholder": "Pick one" + }, + "category": { + "label": "Category", + "placeholder": "Select a category or create a new one", + "nothingFound": "Nothing found", + "createLabel": "+ Create {{query}}" + }, + "integrations": { + "apiKey": { + "label": "API key", + "placeholder": "Your API key", + "validation": { + "noKey": "Invalid Key" + }, + "tip": { + "text": "Get your API key", + "link": "here." + } + }, + "qBittorrent": { + "username": { + "label": "Username", + "placeholder": "admin", + "validation": { + "invalidUsername": "Invalid username" + } + }, + "password": { + "label": "Password", + "placeholder": "adminadmin", + "validation": { + "invalidPassword": "Invalid password" + } + } + }, + "deluge": { + "password": { + "label": "Password", + "placeholder": "password", + "validation": { + "invalidPassword": "Invalid password" + } + } + }, + "transmission": { + "username": { + "label": "Username", + "placeholder": "admin", + "validation": { + "invalidUsername": "Invalid username" + } + }, + "password": { + "label": "Password", + "placeholder": "adminadmin", + "validation": { + "invalidPassword": "Invalid password" + } + } + } + } + } + }, + "advancedOptions": { + "title": "Advanced options", + "form": { + "httpStatusCodes": { + "label": "HTTP Status Codes", + "placeholder": "Select valid status codes", + "clearButtonLabel": "Clear selection", + "nothingFound": "Nothing found" + }, + "openServiceInNewTab": { + "label": "Open service in new tab" + }, + "buttons": { + "submit": { + "content": "Add service" + } + } + } + } + } + } + } + } + }, + "modules": { + "common": { + "mediaCard": { + "buttons": { + "play": "Play", + "request": "Request" + } + } + }, + "calendar": { + "title": "Calendar", + "description": "A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.", + "options": { + "sundayStart": "Start the week on Sunday" + } + }, + "dashDot": { + "card": { + "title": "Dash.", + "errors": { + "noService": "No dash. service found. Please add one to your Homarr dashboard or set a dashdot URL in the module options", + "noInformation": "Cannot acquire information from dash. - are you running the latest version?" + }, + "graphs": { + "storage": { + "title": "Storage", + "label": "Storage:" + }, + "network": { + "title": "Network", + "label": "Network:", + "metrics": { + "download": "Down", + "upload": "Up" + } + }, + "cpu": { + "title": "CPU" + }, + "memory": { + "title": "RAM" + }, + "gpu": { + "title": "GPU" + } + } + } + }, + "torrent": { + "card": { + "title": "Your Downloads" + } + }, + "downloads": { + "card": { + "table": { + "header": { + "name": "Name", + "size": "Size", + "download": "Down", + "upload": "Up", + "estimatedTimeOfArrival": "ETA", + "progress": "Progress" + }, + "body": { + "nothingFound": "No torrents found" + } + } + } + }, + "weather": { + "card": { + "weatherDescriptions": { + "clear": "Clear", + "mainlyClear": "Mainly clear", + "fog": "Fog", + "drizzle": "Drizzle", + "freezingDrizzle": "Freezing drizzle", + "rain": "Rain", + "freezingRain": "Freezing rain", + "snowFall": "Snow fall", + "snowGrains": "Snow grains", + "rainShowers": "Rain showers", + "snowShowers": "Snow showers", + "thunderstorm": "Thunderstorm", + "thunderstormWithHail": "Thunderstorm with hail", + "unknown": "Unknown" + } + } + }, + "overseerr": { + "popup": { + "item": { + "buttons": { + "askFor": "Ask for {{title}}", + "cancel": "Cancel", + "request": "Request" + }, + "alerts": { + "automaticApproval": { + "title": "Using API key", + "text": "This request will be automatically approved" + } + } + }, + "seasonSelector": { + "caption": "Tick the seasons that you want to be downloaded", + "table": { + "header": { + "season": "Season", + "numberOfEpisodes": "Number of episodes" + } + } + } + } + }, + "ping": { + "states": { + "online": "Online {{response}}", + "offline": "Offline {{response}}", + "loading": "Loading..." + } + }, + "docker": { + "search": { + "placeholder": "Search by container or image name" + }, + "table": { + "header": { + "name": "Name", + "image": "Image", + "ports": "Ports", + "state": "State" + }, + "body": { + "portCollapse": "{{ports}} more" + } + } + } + } +} \ No newline at end of file diff --git a/public/locales/en-us.json b/public/locales/en-us.json new file mode 100644 index 000000000..142283853 --- /dev/null +++ b/public/locales/en-us.json @@ -0,0 +1,385 @@ +{ + "settings": { + "title": "Settings", + "tooltip": "Settings", + "tabs": { + "common": { + "title": "Common", + "settings": { + "searchEngine": { + "title": "Search engine", + "tips": { +"generalTip": "Use the prefixes !yt and !t in front of your query to search on YouTube or for a Torrent respectively.", + "placeholderTip": "%s can be used as a placeholder for the query." + }, + "customEngine": { + "label": "Query URL", + "placeholder": "Custom query URL" + } + }, + "colorScheme": { + "label": "Switch to {{scheme}} mode" + }, + "widgetsPositionSwitch": { + "label": "Position widgets on left" + }, + "moduleEnabler": { + "title": "Module enabler" + }, + "language": { + "title": "Language" + }, + "configChanger": { + "configSelect": { + "label": "Config loader" + }, + "modal": { + "title": "Choose the name of your new config", + "form": { + "configName": { + "label": "Config name", + "placeholder": "Your new config name" + }, + "buttons:": { + "submit": "Confirm" + } + } + }, + "buttons": { + "download": "Download config", + "delete": { + "text": "Delete config", + "notifications": { + "deleted": { + "title": "Config deleted", + "message": "Config deleted" + }, + "deleteFailed": { + "title": "Config delete failed", + "message": "Config delete failed" + } + } + }, + "saveCopy": "Save a copy" + } + }, + "configTip": "Upload your config file by dragging and dropping it onto the page!" + } + }, + "customizations": { + "title": "Customizations", + "settings": { + "opacitySelector": { + "label": "App Opacity" + }, + "colorSelector": { + "suffix": "{{color}} color" + }, + "shadeSelector": { + "label": "Shade" + }, + "pageTitle": { + "label": "Page Title", + "placeholder": "Homarr 🦞" + }, + "logo": { + "label": "Logo", + "placeholder": "/img/logo.png" + }, + "favicon": { + "label": "Favicon", + "placeholder": "/favicon.png" + }, + "background": { + "label": "Background", + "placeholder": "/img/background.png" + }, + "buttons": { + "submit": "Save" + } + } + } + }, + "credits": { + "madeWithLove": "Made with ❤️ by @" + } + }, + "layout": { + "header": { + "search": { + "input": { + "placeholder": "Search the web..." + } + }, + "docker": { + "errors": { + "integrationFailed": { + "title": "Docker integration failed", + "message": "Did you forget to mount the docker socket ?" + } + }, + "actionIcon": { + "tooltip": "Docker" + } + }, + "addService": { + "actionIcon": { + "tooltip": "Add a service" + }, + "modal": { + "title": "Add service", + "form": { + "validation": { + "invalidUrl": "Please enter a valid URL", + "noStatusCodeSelected": "Please select a status code" + } + }, + "tabs": { + "options": { + "title": "Options", + "form": { + "serviceName": { + "label": "Service name", + "placeholder": "Plex" + }, + "iconUrl": { + "label": "Icon URL" + }, + "serviceUrl": { + "label": "Service URL" + }, + "onClickUrl": { + "label": "On Click URL" + }, + "serviceType": { + "label": "Service type", + "defaultValue": "Other", + "placeholder": "Pick one" + }, + "category": { + "label": "Category", + "placeholder": "Select a category or create a new one", + "nothingFound": "Nothing found", + "createLabel": "+ Create {{query}}" + }, + "integrations": { + "apiKey": { + "label": "API key", + "placeholder": "Your API key", + "validation": { + "noKey": "Invalid Key" + }, + "tip": { + "text": "Get your API key", + "link": "here." + } + }, + "qBittorrent": { + "username": { + "label": "Username", + "placeholder": "admin", + "validation": { + "invalidUsername": "Invalid username" + } + }, + "password": { + "label": "Password", + "placeholder": "adminadmin", + "validation": { + "invalidPassword": "Invalid password" + } + } + }, + "deluge": { + "password": { + "label": "Password", + "placeholder": "password", + "validation": { + "invalidPassword": "Invalid password" + } + } + }, + "transmission": { + "username": { + "label": "Username", + "placeholder": "admin", + "validation": { + "invalidUsername": "Invalid username" + } + }, + "password": { + "label": "Password", + "placeholder": "adminadmin", + "validation": { + "invalidPassword": "Invalid password" + } + } + } + } + } + }, + "advancedOptions": { + "title": "Advanced options", + "form": { + "httpStatusCodes": { + "label": "HTTP Status Codes", + "placeholder": "Select valid status codes", + "clearButtonLabel": "Clear selection", + "nothingFound": "Nothing found" + }, + "openServiceInNewTab": { + "label": "Open service in new tab" + }, + "buttons": { + "submit": { + "content": "Add service" + } + } + } + } + } + } + } + } + }, + "modules": { + "common": { + "mediaCard": { + "buttons": { + "play": "Play", + "request": "Request" + } + } + }, + "calendar": { + "title": "Calendar", + "description": "A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.", + "options": { + "sundayStart": "Start the week on Sunday" + } + }, + "dashDot": { + "card": { + "title": "Dash.", + "errors": { + "noService": "No dash. service found. Please add one to your Homarr dashboard or set a dashdot URL in the module options", + "noInformation": "Cannot acquire information from dash. - are you running the latest version?" + }, + "graphs": { + "storage": { + "title": "Storage", + "label": "Storage:" + }, + "network": { + "title": "Network", + "label": "Network:", + "metrics": { + "download": "Down", + "upload": "Up" + } + }, + "cpu": { + "title": "CPU" + }, + "memory": { + "title": "RAM" + }, + "gpu": { + "title": "GPU" + } + } + } + }, + "torrent": { + "card": { + "title": "Your Downloads" + } + }, + "downloads": { + "card": { + "table": { + "header": { + "name": "Name", + "size": "Size", + "download": "Down", + "upload": "Up", + "estimatedTimeOfArrival": "ETA", + "progress": "Progress" + }, + "body": { + "nothingFound": "No torrents found" + } + } + } + }, + "weather": { + "card": { + "weatherDescriptions": { + "clear": "Clear", + "mainlyClear": "Mainly clear", + "fog": "Fog", + "drizzle": "Drizzle", + "freezingDrizzle": "Freezing drizzle", + "rain": "Rain", + "freezingRain": "Freezing rain", + "snowFall": "Snow fall", + "snowGrains": "Snow grains", + "rainShowers": "Rain showers", + "snowShowers": "Snow showers", + "thunderstorm": "Thunderstorm", + "thunderstormWithHail": "Thunderstorm with hail", + "unknown": "Unknown" + } + } + }, + "overseerr": { + "popup": { + "item": { + "buttons": { + "askFor": "Ask for {{title}}", + "cancel": "Cancel", + "request": "Request" + }, + "alerts": { + "automaticApproval": { + "title": "Using API key", + "text": "This request will be automatically approved" + } + } + }, + "seasonSelector": { + "caption": "Tick the seasons that you want to be downloaded", + "table": { + "header": { + "season": "Season", + "numberOfEpisodes": "Number of episodes" + } + } + } + } + }, + "ping": { + "states": { + "online": "Online {{response}}", + "offline": "Offline {{response}}", + "loading": "Loading..." + } + }, + "docker": { + "search": { + "placeholder": "Search by container or image name" + }, + "table": { + "header": { + "name": "Name", + "image": "Image", + "ports": "Ports", + "state": "State" + }, + "body": { + "portCollapse": "{{ports}} more" + } + } + } + } +} \ No newline at end of file diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx index 9cfc402ba..db163f4bd 100644 --- a/src/components/AppShelf/AddAppShelfItem.tsx +++ b/src/components/AppShelf/AddAppShelfItem.tsx @@ -22,6 +22,7 @@ import { IconApps } from '@tabler/icons'; import { useEffect, useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; import { useDebouncedValue } from '@mantine/hooks'; +import { t } from 'i18next'; import { useConfig } from '../../tools/state'; import { tryMatchPort, ServiceTypeList, StatusCodes } from '../../tools/types'; import Tip from '../layout/Tip'; @@ -33,13 +34,13 @@ export function AddItemShelfButton(props: any) { Add service} + title={{t('layout.header.addService.modal.title')}} opened={props.opened || opened} onClose={() => setOpened(false)} > - + void } & try { const _isValid = new URL(value); } catch (e) { - return 'Please enter a valid URL'; + return t('layout.header.addService.modal.form.validation.invalidUrl'); } return null; }, status: (value: string[]) => { if (!value.length) { - return 'Please select a status code'; + return t('layout.header.addService.modal.form.validation.noStatusCodeSelected'); } return null; }, @@ -203,48 +204,62 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & > - Options - Advanced options + + {t('layout.header.addService.modal.tabs.options.title')} + + + {t('layout.header.addService.modal.tabs.advancedOptions.title')} + void } & setCategories([...InitialCategories, query]); return item; }} - getCreateLabel={(query) => `+ Create "${query}"`} + getCreateLabel={(query) => + t('layout.header.addService.modal.tabs.options.form.category.createLabel', { + query, + }) + } {...form.getInputProps('category')} /> @@ -266,23 +285,36 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & <> { form.setFieldValue('apiKey', event.currentTarget.value); }} - error={form.errors.apiKey && 'Invalid API key'} + error={ + form.errors.apiKey && + t( + 'layout.header.addService.modal.tabs.options.form.integrations.apiKey.validation.noKey' + ) + } /> - Get your API key{' '} + {t( + 'layout.header.addService.modal.tabs.options.form.integrations.apiKey.tip.text' + )}{' '} - here. + {t( + 'layout.header.addService.modal.tabs.options.form.integrations.apiKey.tip.link' + )} @@ -291,79 +323,134 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & <> { form.setFieldValue('username', event.currentTarget.value); }} - error={form.errors.username && 'Invalid username'} + error={ + form.errors.username && + t( + 'layout.header.addService.modal.tabs.options.form.integrations.qBittorrent.username.validation.invalidUsername' + ) + } /> { form.setFieldValue('password', event.currentTarget.value); }} - error={form.errors.password && 'Invalid password'} + error={ + form.errors.password && + t( + 'layout.header.addService.modal.tabs.options.form.integrations.qBittorrent.password.validation.invalidPassword' + ) + } /> )} {form.values.type === 'Deluge' && ( <> { form.setFieldValue('password', event.currentTarget.value); }} - error={form.errors.password && 'Invalid password'} + error={ + form.errors.password && + t( + 'layout.header.addService.modal.tabs.options.form.integrations.deluge.password.validation.invalidPassword' + ) + } /> )} {form.values.type === 'Transmission' && ( <> { form.setFieldValue('username', event.currentTarget.value); }} - error={form.errors.username && 'Invalid username'} + error={ + form.errors.username && + t( + 'layout.header.addService.modal.tabs.options.form.integrations.transmission.username.validation.invalidUsername' + ) + } /> { form.setFieldValue('password', event.currentTarget.value); }} - error={form.errors.password && 'Invalid password'} + error={ + form.errors.password && + t( + 'layout.header.addService.modal.tabs.options.form.integrations.transmission.password.validation.invalidPassword' + ) + } /> )} - + @@ -371,7 +458,10 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & - + diff --git a/src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx b/src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx index 410dcbaf2..b6a68d2ff 100644 --- a/src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx +++ b/src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { createStyles, Switch, Group, useMantineColorScheme, Kbd } from '@mantine/core'; import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons'; import { useConfig } from '../../tools/state'; +import { t } from 'i18next'; const useStyles = createStyles((theme) => ({ root: { @@ -41,7 +42,9 @@ export function ColorSchemeSwitch() { toggleColorScheme()} size="md" /> - Switch to {colorScheme === 'dark' ? 'light' : 'dark'} mode + {t('settings.tabs.common.settings.colorScheme.label', { + scheme: colorScheme === 'dark' ? 'light' : 'dark', + })} Ctrl+J diff --git a/src/components/Config/ConfigChanger.tsx b/src/components/Config/ConfigChanger.tsx index b2c5a3898..7025c79e8 100644 --- a/src/components/Config/ConfigChanger.tsx +++ b/src/components/Config/ConfigChanger.tsx @@ -1,5 +1,6 @@ import { Center, Loader, Select, Tooltip } from '@mantine/core'; import { setCookie } from 'cookies-next'; +import { t } from 'i18next'; import { useEffect, useState } from 'react'; import { useConfig } from '../../tools/state'; @@ -23,7 +24,7 @@ export default function ConfigChanger() { // return { diff --git a/src/components/Config/SaveConfig.tsx b/src/components/Config/SaveConfig.tsx index d18b38ae2..fc7f6a266 100644 --- a/src/components/Config/SaveConfig.tsx +++ b/src/components/Config/SaveConfig.tsx @@ -12,6 +12,7 @@ import { IconX as X, } from '@tabler/icons'; import { useConfig } from '../../tools/state'; +import { t } from 'i18next'; export default function SaveConfigComponent(props: any) { const [opened, setOpened] = useState(false); @@ -32,7 +33,7 @@ export default function SaveConfigComponent(props: any) { radius="md" opened={opened} onClose={() => setOpened(false)} - title="Choose the name of your new config" + title={t('settings.tabs.common.settings.configChanger.modal.title')} >
{ @@ -50,17 +51,21 @@ export default function SaveConfigComponent(props: any) { > - + ); diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx index 877fc79c7..ef27a2f45 100644 --- a/src/components/Settings/AdvancedSettings.tsx +++ b/src/components/Settings/AdvancedSettings.tsx @@ -5,6 +5,7 @@ import { ColorSelector } from './ColorSelector'; import { OpacitySelector } from './OpacitySelector'; import { AppCardWidthSelector } from './AppCardWidthSelector'; import { ShadeSelector } from './ShadeSelector'; +import { t } from 'i18next'; export default function TitleChanger() { const { config, setConfig } = useConfig(); @@ -40,19 +41,27 @@ export default function TitleChanger() {
saveChanges(values))}> - - + + - +
diff --git a/src/components/Settings/ColorSelector.tsx b/src/components/Settings/ColorSelector.tsx index 68a762989..084d6de1b 100644 --- a/src/components/Settings/ColorSelector.tsx +++ b/src/components/Settings/ColorSelector.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { ColorSwatch, Grid, Group, Popover, Text, useMantineTheme } from '@mantine/core'; import { useConfig } from '../../tools/state'; import { useColorTheme } from '../../tools/color'; +import { t } from 'i18next'; interface ColorControlProps { type: string; @@ -82,7 +83,11 @@ export function ColorSelector({ type }: ColorControlProps) { - {type[0].toUpperCase() + type.slice(1)} color + + {t('settings.tabs.customizations.settings.colorSelector.suffix', { + color: type[0].toUpperCase() + type.slice(1), + })} + ); } diff --git a/src/components/Settings/CommonSettings.tsx b/src/components/Settings/CommonSettings.tsx index 739f65869..0258ae95e 100644 --- a/src/components/Settings/CommonSettings.tsx +++ b/src/components/Settings/CommonSettings.tsx @@ -7,6 +7,8 @@ import ConfigChanger from '../Config/ConfigChanger'; import SaveConfigComponent from '../Config/SaveConfig'; import ModuleEnabler from './ModuleEnabler'; import Tip from '../layout/Tip'; +import { t } from 'i18next'; +import LanguageSwitch from './LanguageSwitch'; export default function CommonSettings(args: any) { const { config, setConfig } = useConfig(); @@ -26,15 +28,12 @@ export default function CommonSettings(args: any) { return ( - Search engine - - Use the prefixes !yt and !t in front of your query to search on YouTube or - for a Torrent respectively. - + {t('settings.tabs.common.settings.searchEngine.title')} + {t('settings.tabs.common.settings.searchEngine.tips.generalTip')} {searchUrl === 'Custom' && ( <> - %s can be used as a placeholder for the query. + {t('settings.tabs.common.settings.searchEngine.tips.placeholderTip')} { setCustomSearchUrl(event.currentTarget.value); @@ -78,9 +77,10 @@ export default function CommonSettings(args: any) { + - Upload your config file by dragging and dropping it onto the page! + {t('settings.tabs.common.settings.configTip')} ); } diff --git a/src/components/Settings/Credits.tsx b/src/components/Settings/Credits.tsx index 73778b0d5..32cb9f001 100644 --- a/src/components/Settings/Credits.tsx +++ b/src/components/Settings/Credits.tsx @@ -1,5 +1,7 @@ import { Group, ActionIcon, Anchor, Text } from '@mantine/core'; import { IconBrandDiscord, IconBrandGithub } from '@tabler/icons'; +import { t } from 'i18next'; + import { CURRENT_VERSION } from '../../../data/constants'; export default function Credits(props: any) { @@ -27,7 +29,7 @@ export default function Credits(props: any) { color: 'gray', }} > - Made with ❤️ by @ + {t('settings.credits.madeWithLove')} (language); + + const data = languages.map((language) => ({ + image: `https://countryflagsapi.com/png/${language.split('-').pop()}`, + label: convertCodeToName(language), + value: language, + })); + + const onChangeSelect = (value: string) => { + setSelectedLanguage(value); + + const languageName = convertCodeToName(value); + + changeLanguage(value) + .then(() => { + showNotification({ + title: 'Language changed', + message: `You changed the language to '${languageName}'`, + color: 'green', + autoClose: 5000, + }); + }) + .catch((err) => { + showNotification({ + title: 'Failed to change language', + message: `Failed to change to '${languageName}', Error:'${err}`, + color: 'red', + autoClose: 5000, + }); + }); + }; + + return ( + +