add translation keys (#246)

* Fix i18n tsc issue

"t" can return null by default.
This was already disabled in the config, but it had no effect on tsc.

* Fix translation in "DefaultNavBar"

key was missing and since this is a constant the translation wouldn't update in case the language got changed after first load.

* Enable typing for i18n translation keys

* Add translation keys

src/components/navbar/ReaderNavBar.tsx

@@ -26,6 +26,7 @@ import { styled } from '@mui/system';
 import useBackTo from 'util/useBackTo';
 import ReaderSettingsOptions from 'components/reader/ReaderSettingsOptions';
 import { IChapter, IManga, IMangaCard, IReaderSettings } from 'typings';
+import { useTranslation } from 'react-i18next';
 
 const Root = styled('div')(({ theme }) => ({
     top: 0,
@@ -121,6 +122,7 @@ interface IProps {
 }
 
 export default function ReaderNavBar(props: IProps) {
+    const { t } = useTranslation();
     const history = useHistory();
     const backTo = useBackTo();
     const location = useLocation<{
@@ -230,7 +232,7 @@ export default function ReaderNavBar(props: IProps) {
                             },
                         }}
                     >
-                        <ListItemText primary="Reader Settings" />
+                        <ListItemText primary={t('reader.settings.title.reader_settings')} />
                         <ListItemSecondaryAction>
                             <IconButton
                                 edge="start"
@@ -258,7 +260,7 @@ export default function ReaderNavBar(props: IProps) {
                     <Divider sx={{ my: 1, mx: 2 }} />
                     <Navigation>
                         <PageNavigation>
-                            <span>Currently on page</span>
+                            <span>{t('reader.page_info.label.currently_on_page')}</span>
                             <FormControl size="small" sx={{ margin: '0 5px' }} disabled={chapter.pageCount === -1}>
                                 <Select
                                     MenuProps={MenuProps}
@@ -278,11 +280,11 @@ export default function ReaderNavBar(props: IProps) {
                                         ))}
                                 </Select>
                             </FormControl>
-                            <span>{`of ${chapter.pageCount}`}</span>
+                            <span>{t('reader.page_info.label.of_max_pages', { maxPages: chapter.pageCount })}</span>
                         </PageNavigation>
                         <ChapterNavigation>
                             <IconButton
-                                title="Previous Chapter"
+                                title={t('reader.button.previous_chapter')}
                                 sx={{ gridArea: 'pre' }}
                                 disabled={chapter.index <= 1}
                                 onClick={() => {
@@ -317,14 +319,14 @@ export default function ReaderNavBar(props: IProps) {
                                         .map((ignoreValue, index) => (
                                             // eslint-disable-next-line  max-len
                                             // eslint-disable-next-line  react/no-array-index-key
-                                            <MenuItem key={`Chapter#${index + 1}`} value={index + 1}>{`Chapter ${
-                                                index + 1
-                                            }`}</MenuItem>
+                                            <MenuItem key={`Chapter#${index + 1}`} value={index + 1}>{`${t(
+                                                'chapter.title',
+                                            )} ${index + 1}`}</MenuItem>
                                         ))}
                                 </Select>
                             </FormControl>
                             <IconButton
-                                title="Next Chapter"
+                                title={t('reader.button.next_chapter')}
                                 sx={{ gridArea: 'next' }}
                                 disabled={chapter.index < 1 || chapter.index >= chapter.chapterCount}
                                 onClick={() => {