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/source/GridLayouts.tsx

@@ -9,9 +9,12 @@ import { IconButton, Menu, MenuItem, FormControlLabel, Radio } from '@mui/materi
 import React from 'react';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+import { useTranslation } from 'react-i18next';
 
 // TODO: clean up this to use a FormControl, and remove dependency on name o radio button
 export default function SourceGridLayout() {
+    const { t } = useTranslation();
+
     const {
         options: { SourcegridLayout },
         setOptions,
@@ -53,7 +56,7 @@ export default function SourceGridLayout() {
             >
                 <MenuItem onClick={handleClose}>
                     <FormControlLabel
-                        label="Compact grid"
+                        label={t('global.grid_layout.label.compact_grid')}
                         value={GridLayout.Compact}
                         control={
                             <Radio
@@ -66,7 +69,7 @@ export default function SourceGridLayout() {
                 </MenuItem>
                 <MenuItem onClick={handleClose}>
                     <FormControlLabel
-                        label="Comfortable grid"
+                        label={t('global.grid_layout.label.comfortable_grid')}
                         control={
                             <Radio
                                 name={GridLayout.Comfortable.toString()}
@@ -78,7 +81,7 @@ export default function SourceGridLayout() {
                 </MenuItem>
                 <MenuItem onClick={handleClose}>
                     <FormControlLabel
-                        label="List"
+                        label={t('global.grid_layout.label.list')}
                         control={
                             <Radio
                                 name={GridLayout.List.toString()}

src/components/source/SourceMangaGrid.tsx

@@ -9,14 +9,14 @@
 import React from 'react';
 import MangaGrid, { IMangaGridProps } from 'components/MangaGrid';
 import { IMangaCard } from 'typings';
-
-const FILTERED_OUT_MESSAGE = 'There are no Manga matching this filter';
+import { useTranslation } from 'react-i18next';
 
 function filterManga(mangas: IMangaCard[]): IMangaCard[] {
     return mangas;
 }
 
 export default function SourceMangaGrid(props: IMangaGridProps) {
+    const { t } = useTranslation();
     const { mangas, isLoading, hasNextPage, lastPageNum, setLastPageNum, message, messageExtra, gridLayout } = props;
 
     const filteredManga = filterManga(mangas);
@@ -29,7 +29,7 @@ export default function SourceMangaGrid(props: IMangaGridProps) {
             hasNextPage={hasNextPage}
             lastPageNum={lastPageNum}
             setLastPageNum={setLastPageNum}
-            message={showFilteredOutMessage ? FILTERED_OUT_MESSAGE : message}
+            message={showFilteredOutMessage ? t('manga.error.label.no_matches') : message}
             messageExtra={messageExtra}
             gridLayout={gridLayout}
             inLibraryIndicator

src/components/source/SourceOptions.tsx

@@ -22,6 +22,7 @@ import TriStateFilter from 'components/source/filters/TriStateFilter';
 import GroupFilter from 'components/source/filters/GroupFilter';
 import SeperatorFilter from 'components/source/filters/SeparatorFilter';
 import { ISourceFilters, IState } from 'typings';
+import { useTranslation } from 'react-i18next';
 
 interface IFilters {
     sourceFilter: ISourceFilters[];
@@ -143,6 +144,7 @@ export default function SourceOptions({
     setSearch,
     update,
 }: IFilters1) {
+    const { t } = useTranslation();
     const [FilterOptions, setFilterOptions] = React.useState(false);
 
     function handleReset() {
@@ -165,14 +167,14 @@ export default function SourceOptions({
                 color="primary"
             >
                 <FilterListIcon />
-                Filter
+                {t('global.button.filter')}
             </Fab>
 
             <OptionsPanel open={FilterOptions} onClose={() => setFilterOptions(false)}>
                 <Box sx={{ display: 'flex', p: 2, pb: 0 }}>
-                    <Button onClick={handleReset}>Reset</Button>
+                    <Button onClick={handleReset}>{t('global.button.reset')}</Button>
                     <Button sx={{ marginLeft: 'auto' }} variant="contained" onClick={handleSubmit}>
-                        Submit
+                        {t('global.button.submit')}
                     </Button>
                 </Box>
                 <Box