Add localization support (#333)

* Add updated i18n config and en locale

src/renderer/features/lyrics/components/lyrics-search-form.tsx

@@ -4,6 +4,7 @@ import { useForm } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
 import { openModal } from '@mantine/modals';
 import orderBy from 'lodash/orderBy';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import {
     InternetProviderLyricSearchResponse,
@@ -12,6 +13,7 @@ import {
 } from '../../../api/types';
 import { useLyricSearch } from '../queries/lyric-search-query';
 import { ScrollArea, Spinner, Text, TextInput } from '/@/renderer/components';
+import i18n from '/@/i18n/i18n';
 
 const SearchItem = styled.button`
     all: unset;
@@ -84,6 +86,7 @@ interface LyricSearchFormProps {
 }
 
 export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearchFormProps) => {
+    const { t } = useTranslation();
     const form = useForm({
         initialValues: {
             artist: artist || '',
@@ -117,11 +120,17 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
                 <Group grow>
                     <TextInput
                         data-autofocus
-                        label="Name"
+                        label={t('form.lyricSearch.input', {
+                            context: 'name',
+                            postProcess: 'titleCase',
+                        })}
                         {...form.getInputProps('name')}
                     />
                     <TextInput
-                        label="Artist"
+                        label={t('form.lyricSearch.input', {
+                            context: 'artist',
+                            postProcess: 'titleCase',
+                        })}
                         {...form.getInputProps('artist')}
                     />
                 </Group>
@@ -170,6 +179,6 @@ export const openLyricSearchModal = ({ artist, name, onSearchOverride }: LyricSe
             />
         ),
         size: 'lg',
-        title: 'Lyrics Search',
+        title: i18n.t('form.lyricSearch.title', { postProcess: 'titleCase' }) as string,
     });
 };

src/renderer/features/lyrics/lyrics-actions.tsx

@@ -1,5 +1,6 @@
 import { Box, Group } from '@mantine/core';
 import isElectron from 'is-electron';
+import { useTranslation } from 'react-i18next';
 import { RiAddFill, RiSubtractFill } from 'react-icons/ri';
 import { LyricsOverride } from '/@/renderer/api/types';
 import { Button, NumberInput, Tooltip } from '/@/renderer/components';
@@ -22,6 +23,7 @@ export const LyricsActions = ({
     onResetLyric,
     onSearchOverride,
 }: LyricsActionsProps) => {
+    const { t } = useTranslation();
     const currentSong = useCurrentSong();
     const { setSettings } = useSettingsStoreActions();
     const { delayMs, sources } = useLyricsSettings();
@@ -54,7 +56,7 @@ export const LyricsActions = ({
                             })
                         }
                     >
-                        Search
+                        {t('common.search', { postProcess: 'titleCase' })}
                     </Button>
                 ) : null}
                 <Button
@@ -65,7 +67,7 @@ export const LyricsActions = ({
                     <RiSubtractFill />
                 </Button>
                 <Tooltip
-                    label="Offset (ms)"
+                    label={t('setting.lyricOffset', { postProcess: 'sentenceCase' })}
                     openDelay={500}
                 >
                     <NumberInput
@@ -90,7 +92,7 @@ export const LyricsActions = ({
                         variant="subtle"
                         onClick={onResetLyric}
                     >
-                        Reset
+                        {t('common.reset', { postProcess: 'sentenceCase' })}
                     </Button>
                 ) : null}
             </Group>
@@ -104,7 +106,7 @@ export const LyricsActions = ({
                         variant="subtle"
                         onClick={onRemoveLyric}
                     >
-                        Clear
+                        {t('common.clear', { postProcess: 'sentenceCase' })}
                     </Button>
                 ) : null}
             </Box>