diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 1a99f9bd3..7c7e1b1ee 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -1,14 +1,14 @@ { - "actions": { - "save": "Save", - "cancel": "Cancel", - "close": "Close", - "delete": "Delete", - "ok": "Okay", - "edit": "Edit", - "changePosition": "Change position", - "remove": "Remove" - }, + "save": "Save", + "about": "About", + "cancel": "Cancel", + "close": "Close", + "delete": "Delete", + "ok": "Okay", + "edit": "Edit", + "version": "Version", + "changePosition": "Change position", + "remove": "Remove", "sections": { "settings": "Settings", "dangerZone": "Danger zone" diff --git a/public/locales/en/layout/element-selector/selector.json b/public/locales/en/layout/element-selector/selector.json index 3d5dcb2f1..4df8950f3 100644 --- a/public/locales/en/layout/element-selector/selector.json +++ b/public/locales/en/layout/element-selector/selector.json @@ -3,6 +3,7 @@ "title": "Add a new tile", "text": "Tiles are the main element of homarr. They allow you to configure the dashboard and display the information you want." }, + "widgetDescription": "Widgets interact with your apps, to provide you with more control over your applications. They usually require a few configurations before use.", "actionIcon": { "tooltip": "Add a tile" } diff --git a/public/locales/en/layout/header/actions/toggle-edit-mode.json b/public/locales/en/layout/header/actions/toggle-edit-mode.json index 3ae95e24f..db29b1bc4 100644 --- a/public/locales/en/layout/header/actions/toggle-edit-mode.json +++ b/public/locales/en/layout/header/actions/toggle-edit-mode.json @@ -6,6 +6,6 @@ }, "popover": { "title": "Edit mode is enabled", - "text": "You can adjust and configure your apps now. Changes are not saved until you exit edit mode" + "text": "You can adjust and configure your apps now. Changes are not saved until you exit edit mode" } } \ No newline at end of file diff --git a/public/locales/en/layout/modals/about.json b/public/locales/en/layout/modals/about.json new file mode 100644 index 000000000..c2b8c37c3 --- /dev/null +++ b/public/locales/en/layout/modals/about.json @@ -0,0 +1,7 @@ +{ + "description": "Homarr is a simple and modern homepage for your server that helps you access all of your apps in one place. It integrates with the apps you use to display useful information or control them. It's easy to install and supports many different devices.", + "i18n": "Loaded I18n translation namespaces", + "locales": "Configured I18n locales", + "contact": "Having trouble or questions? Connect with us!", + "addToDashboard": "Add to Dashboard" +} \ No newline at end of file diff --git a/src/components/About/AboutModal.tsx b/src/components/About/AboutModal.tsx index f7c9b0e08..f4f2bc7e8 100644 --- a/src/components/About/AboutModal.tsx +++ b/src/components/About/AboutModal.tsx @@ -4,6 +4,7 @@ import { Badge, Button, createStyles, + Divider, Group, HoverCard, Modal, @@ -21,7 +22,7 @@ import { } from '@tabler/icons'; import { motion } from 'framer-motion'; import { InitOptions } from 'i18next'; -import { i18n } from 'next-i18next'; +import { i18n, Trans, useTranslation } from 'next-i18next'; import Image from 'next/image'; import { ReactNode } from 'react'; import { CURRENT_VERSION } from '../../../data/constants'; @@ -37,6 +38,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod const { classes } = useStyles(); const colorGradiant = usePrimaryGradient(); const informations = useInformationTableItems(newVersionAvailable); + const { t } = useTranslation(['common', 'layout/modals/about']); return ( - About Homarr + {t('about')} Homarr } size="xl" > - Homarr is a simple and modern homepage for your server that helps you access all of your - apps in one place. It integrates with the apps you use to display useful information or - control them. It's easy to install and supports many different devices. + - - Version information: - - {informations.map((item, index) => ( @@ -71,7 +67,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod {item.icon} - {item.label} + {t(item.label)} @@ -79,9 +75,9 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod ))}
{item.content}
- + - Having trouble or questions? Connect with us! + {t('layout/modals/about:contact')} @@ -101,7 +97,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod leftIcon={} variant="default" > - Website + Documentation diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx b/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx index 33d901dbd..7fad7c4d4 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx +++ b/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx @@ -1,5 +1,6 @@ -import { Button, Card, Center, Grid, Stack, Text } from '@mantine/core'; +import { Button, Card, Center, Grid, ScrollArea, Stack, Text } from '@mantine/core'; import { TablerIcon } from '@tabler/icons'; +import { useTranslation } from 'next-i18next'; import Image from 'next/image'; import React from 'react'; import { useStyles } from './styles'; @@ -20,6 +21,7 @@ export const GenericAvailableElementType = ({ handleAddition, }: GenericAvailableElementTypeProps) => { const { classes } = useStyles(); + const { t } = useTranslation('layout/modals/about'); const Icon = typeof image === 'string' ? () => : image; @@ -50,7 +52,7 @@ export const GenericAvailableElementType = ({ radius="md" fullWidth > - Add to Dashboard + {t('addToDashboard')} diff --git a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx index e75559d67..c6192ab58 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx +++ b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx @@ -19,8 +19,7 @@ export const AvailableIntegrationElements = ({ - Widgets interact with your apps, to provide you with more control over your applications. - They usually require a few configurations before use. + {t('widgetDescription')} diff --git a/src/components/Dashboard/Tiles/GenericTileMenu.tsx b/src/components/Dashboard/Tiles/GenericTileMenu.tsx index 155b3ced8..fba87edfa 100644 --- a/src/components/Dashboard/Tiles/GenericTileMenu.tsx +++ b/src/components/Dashboard/Tiles/GenericTileMenu.tsx @@ -24,7 +24,7 @@ export const GenericTileMenu = ({ } return ( - + @@ -34,14 +34,14 @@ export const GenericTileMenu = ({ {t('sections.settings')} {displayEdit && ( } onClick={handleClickEdit}> - {t('actions.edit')} + {t('edit')} )} } onClick={handleClickChangePosition} > - {t('actions.changePosition')} + {t('changePosition')} {t('sections.dangerZone')} } onClick={handleClickDelete} > - {t('actions.remove')} + {t('remove')} diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index 62b8ac476..caae1b41b 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx @@ -92,9 +92,9 @@ export const WidgetsEditModal = ({ - + ); diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx index f33207f93..59c20f394 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx +++ b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx @@ -35,9 +35,9 @@ export const WidgetsRemoveModal = ({ {t('descriptor.remove.confirm')} - + ); diff --git a/src/components/Dashboard/Views/ViewToggleButton.tsx b/src/components/Dashboard/Views/ViewToggleButton.tsx index 1e0cf0188..d4d1722f4 100644 --- a/src/components/Dashboard/Views/ViewToggleButton.tsx +++ b/src/components/Dashboard/Views/ViewToggleButton.tsx @@ -1,11 +1,13 @@ import { ActionIcon, Button, Text, Tooltip } from '@mantine/core'; import { IconEdit, IconEditOff } from '@tabler/icons'; +import { useTranslation } from 'next-i18next'; import { useScreenLargerThan } from '../../../tools/hooks/useScreenLargerThan'; import { useEditModeStore } from './useEditModeStore'; export const ViewToggleButton = () => { const screenLargerThanMd = useScreenLargerThan('md'); const { enabled: isEditMode, toggleEditMode } = useEditModeStore(); + const { t } = useTranslation('layout/header/actions/toggle-edit-mode'); return ( { color={isEditMode ? 'red' : undefined} radius="md" > - {isEditMode ? 'Exit Edit Mode' : 'Enter Edit Mode'} + {isEditMode ? t('button.enabled') : t('button.disabled')} ) : ( { {t('popover.title')} - {t('popover.text')} + + + diff --git a/src/components/layout/header/SettingsMenu.tsx b/src/components/layout/header/SettingsMenu.tsx index 0fe586faa..05990cbeb 100644 --- a/src/components/layout/header/SettingsMenu.tsx +++ b/src/components/layout/header/SettingsMenu.tsx @@ -37,7 +37,7 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str } onClick={() => aboutModal.open()} > - About + {t('about')} diff --git a/src/modules/moduleWrapper.tsx b/src/modules/moduleWrapper.tsx index d62e6b02e..62109d36c 100644 --- a/src/modules/moduleWrapper.tsx +++ b/src/modules/moduleWrapper.tsx @@ -98,7 +98,7 @@ function getItems(module: IModule) { onChange={(e) => {}} /> - + ); diff --git a/src/tools/translation-namespaces.ts b/src/tools/translation-namespaces.ts index e76015bce..2a8b50170 100644 --- a/src/tools/translation-namespaces.ts +++ b/src/tools/translation-namespaces.ts @@ -3,6 +3,7 @@ export const dashboardNamespaces = [ 'layout/tools', 'layout/element-selector/selector', 'layout/modals/add-app', + 'layout/modals/about', 'layout/header/actions/toggle-edit-mode', 'settings/common', 'settings/general/theme-selector',