Merge pull request #1312 from Tagaishi/translation-handling-update

src/components/Dashboard/Modals/AboutModal/AboutModal.tsx

@@ -167,7 +167,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
             variant="default"
             fullWidth
           >
-            Documentation
+            {t('layout/modals/about:documentation')}
           </Button>
         </Grid.Col>
 
@@ -203,6 +203,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
   const { attributes } = usePackageAttributesStore();
   const { editModeEnabled } = useEditModeInformationStore();
   const { primaryColor } = useColorTheme();
+  const { t } = useTranslation(['layout/modals/about']);
 
   const { configVersion } = useConfigContext();
   const { configs } = useConfigStore();
@@ -300,21 +301,23 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
                   transition={{ duration: 0.8, ease: 'easeInOut' }}
                 >
                   <Badge color="green" variant="filled">
-                    new: {newVersionAvailable}
+                    {t('version.new',{ newVersion: newVersionAvailable})}
                   </Badge>
                 </motion.div>
               </HoverCard.Target>
               <HoverCard.Dropdown>
-                Version{' '}
-                <b>
-                  <Anchor
-                    target="_blank"
-                    href={`https://github.com/ajnart/homarr/releases/tag/${newVersionAvailable}`}
-                  >
-                    {newVersionAvailable}
-                  </Anchor>
-                </b>{' '}
-                is available ! Current version: {attributes.packageVersion}
+                <Text>
+                  {t('version.dropdown', {currentVersion: attributes.packageVersion}).split('{{newVersion}}')[0]}
+                  <b>
+                    <Anchor
+                      target="_blank"
+                      href={`https://github.com/ajnart/homarr/releases/tag/${newVersionAvailable}`}
+                    >
+                      {newVersionAvailable}
+                    </Anchor>
+                  </b>
+                  {t('version.dropdown', {currentVersion: attributes.packageVersion}).split('{{newVersion}}')[1]}
+                </Text>
               </HoverCard.Dropdown>
             </HoverCard>
           )}

src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx

@@ -48,13 +48,13 @@ export const CategoryEditMenu = ({ category }: CategoryEditMenuProps) => {
           {t('menu.moveDown')}
         </Menu.Item>
         <Menu.Label>
-          {t('menu.addCategory')}
+          {t('menu.addCategory',{location: ''})}
         </Menu.Label>
         <Menu.Item icon={<IconRowInsertTop size={20} />} onClick={addCategoryAbove}>
-          {t('menu.addCategory') + ' ' + t('menu.addAbove')}
+          {t('menu.addCategory',{location: t('menu.addAbove')})}
         </Menu.Item>
         <Menu.Item icon={<IconRowInsertBottom size={20} />} onClick={addCategoryBelow}>
-          {t('menu.addCategory') + ' ' + t('menu.addBelow')}
+          {t('menu.addCategory',{location: t('menu.addBelow')})}
         </Menu.Item>
       </Menu.Dropdown>
     </Menu>

src/components/Settings/Common/CacheButtons.tsx

@@ -4,25 +4,29 @@ import { IconTrash } from '@tabler/icons-react';
 import { useState } from 'react';
 
 import { queryClient } from '../../../tools/server/configurations/tanstack/queryClient.tool';
-
-const data = [
-  { value: 'ping', label: 'Ping queries' },
-  { value: 'repository-icons', label: 'Remote/Local icons' },
-  { value: 'calendar/medias', label: 'Medais from the Calendar' },
-  { value: 'weather', label: 'Weather data' },
-];
+import { useTranslation } from 'react-i18next';
 
 export function CacheButtons() {
   const [value, setValue] = useState<string[]>([]);
+
+  const { t } = useTranslation('settings/general/cache-buttons')
+
+  const data = [
+    { value: 'ping', label: t('selector.data.ping') },
+    { value: 'repository-icons', label: t('selector.data.repositoryIcons') },
+    { value: 'calendar/medias', label: t('selector.data.calendar&medias') },
+    { value: 'weather', label: t('selector.data.weather') },
+  ];
+
   return (
     <Stack spacing="xs">
-      <Title order={4}>Cache cleaning</Title>
+      <Title order={4}>{t('title')}</Title>
       <MultiSelect
         value={value}
         searchable
         onChange={setValue}
         data={data}
-        label="Select the cache(s) to clear"
+        label={t('selector.label')}
       />
       <Group>
         <Button
@@ -31,8 +35,11 @@ export function CacheButtons() {
           onClick={() =>
             queryClient.invalidateQueries(value).then(() =>
               notifications.show({
-                title: 'Cache cleared',
-                message: `Cache for ${value.join(', ')} has been cleared`,
+                title: t('buttons.notificationTitle'),
+                message:
+                  value.length > 1 ?
+                  t('buttons.clearSelect.notificationMessageMulti', {values: value.join(', ')}) :
+                  t('buttons.clearSelect.notificationMessageSingle', {value: value[0]}),
                 color: 'teal',
                 icon: <IconTrash />,
                 autoClose: 5000,
@@ -40,14 +47,14 @@ export function CacheButtons() {
             )
           }
         >
-          Clear selected queries
+          {t('buttons.clearSelect.text')}
         </Button>
         <Button
           onClick={() =>
             queryClient.invalidateQueries().then(() =>
               notifications.show({
-                title: 'Cache cleared',
-                message: 'All cache has been cleared',
+                title: t('buttons.notificationTitle'),
+                message: t('buttons.clearAll.notificationMessage'),
                 color: 'teal',
                 icon: <IconTrash />,
                 autoClose: 5000,
@@ -55,7 +62,7 @@ export function CacheButtons() {
             )
           }
         >
-          Clear all cache
+          {t('buttons.clearAll.text')}
         </Button>
       </Group>
     </Stack>

src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx

@@ -35,6 +35,13 @@ export const SearchEngineSelector = ({ searchEngine }: Props) => {
     updateSearchEngineConfig(engine, url);
   };
 
+  const searchEngineOptions: { label: string; value: EngineType }[] = [
+    { label: 'Google', value: 'google' },
+    { label: 'DuckDuckGo', value: 'duckDuckGo' },
+    { label: 'Bing', value: 'bing' },
+    { label: t('custom'), value: 'custom' },
+  ];
+
   return (
     <Stack spacing={0} mt="xs">
       <Title order={5} mb="xs">
@@ -77,13 +84,6 @@ export const SearchEngineSelector = ({ searchEngine }: Props) => {
   );
 };
 
-const searchEngineOptions: { label: string; value: EngineType }[] = [
-  { label: 'Google', value: 'google' },
-  { label: 'DuckDuckGo', value: 'duckDuckGo' },
-  { label: 'Bing', value: 'bing' },
-  { label: 'Custom', value: 'custom' },
-];
-
 export const searchUrls: { [key in CommonSearchEngineCommonSettingsType['type']]: string } = {
   google: 'https://google.com/search?q=',
   duckDuckGo: 'https://duckduckgo.com/?q=',

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -14,8 +14,6 @@ import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/grids
 import { useCardStyles } from '../../../useCardStyles';
 import { AddElementAction } from '../AddElementAction/AddElementAction';
 
-const beforeUnloadEventText = 'Exit the edit mode to save your changes';
-
 export const ToggleEditModeAction = () => {
   const { enabled, toggleEditMode } = useEditModeStore();
   const namedWrapperColumnCount = useNamedWrapperColumnCount();
@@ -24,7 +22,7 @@ export const ToggleEditModeAction = () => {
     namedWrapperColumnCount !== null
       ? t(`common:breakPoints.${namedWrapperColumnCount}`)
       : t('common:loading');
-
+  const beforeUnloadEventText = t('unloadEvent');
   const smallerThanSm = useScreenSmallerThan('sm');
   const { config } = useConfigContext();
   const { classes } = useCardStyles(true);

src/components/layout/header/SettingsMenu/EditModeToggle.tsx

@@ -4,10 +4,12 @@ import { openModal } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
 import { IconEdit, IconEditOff } from '@tabler/icons-react';
 import axios from 'axios';
+import { Trans, useTranslation } from 'next-i18next';
 
 import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation';
 
 function ModalContent() {
+  const { t } = useTranslation('settings/general/edit-mode-toggle');
   const form = useForm({
     initialValues: {
       triedPassword: '',
@@ -20,8 +22,8 @@ function ModalContent() {
           .post('/api/configs/tryPassword', { tried: values.triedPassword, type: 'edit' })
           .then((res) => {
             showNotification({
-              title: 'Success',
-              message: 'Successfully toggled edit mode, reloading the page...',
+              title: t('notification.success.title'),
+              message: t('notification.success.message'),
               color: 'green',
             });
             setTimeout(() => {
@@ -30,8 +32,8 @@ function ModalContent() {
           })
           .catch((_) => {
             showNotification({
-              title: 'Error',
-              message: 'Failed to toggle edit mode, please try again.',
+              title: t('notification.error.title'),
+              message: t('notification.error.message'),
               color: 'red',
             });
           });
@@ -39,18 +41,19 @@ function ModalContent() {
     >
       <Stack>
         <Text size="sm">
-          In order to toggle edit mode, you need to enter the password you entered in the
-          environment variable named <Code>EDIT_MODE_PASSWORD</Code> . If it is not set, you are not
-          able to toggle edit mode on and off.
+          <Trans
+            i18nKey={'settings/general/edit-mode-toggle:form.message'}
+            components={{ Code: <Code children/> }}
+          />
         </Text>
         <PasswordInput
           id="triedPassword"
-          label="Edit password"
+          label={t('form.label')}
           autoFocus
           required
           {...form.getInputProps('triedPassword')}
         />
-        <Button type="submit">Submit</Button>
+        <Button type="submit">{t('form.submit')}</Button>
       </Stack>
     </form>
   );
@@ -59,6 +62,7 @@ function ModalContent() {
 export function EditModeToggle() {
   const { editModeEnabled } = useEditModeInformationStore();
   const Icon = editModeEnabled ? IconEdit : IconEditOff;
+  const { t } = useTranslation('settings/general/edit-mode-toggle');
 
   return (
     <Menu.Item
@@ -66,14 +70,14 @@ export function EditModeToggle() {
       icon={<Icon strokeWidth={1.2} size={18} />}
       onClick={() =>
         openModal({
-          title: 'Toggle edit mode',
+          title: t('menu.toggle'),
           centered: true,
           size: 'lg',
           children: <ModalContent />,
         })
       }
     >
-      {editModeEnabled ? 'Enable edit mode' : 'Disable edit mode'}
+      {editModeEnabled ? t('menu.enable') : t('menu.disable')}
     </Menu.Item>
   );
 }