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/action/CategorySelect.tsx

@@ -16,6 +16,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
 import client, { useQuery } from 'util/client';
 import { ICategory } from 'typings';
+import { useTranslation } from 'react-i18next';
 
 interface IProps {
     open: boolean;
@@ -24,6 +25,8 @@ interface IProps {
 }
 
 export default function CategorySelect(props: IProps) {
+    const { t } = useTranslation();
+
     const { open, setOpen, mangaId } = props;
 
     const { data: mangaCategoriesData, mutate } = useQuery<ICategory[]>(`/api/v1/manga/${mangaId}/category`);
@@ -65,14 +68,14 @@ export default function CategorySelect(props: IProps) {
             maxWidth="xs"
             open={open}
         >
-            <DialogTitle>Set categories</DialogTitle>
+            <DialogTitle>{t('category.title.set_categories')}</DialogTitle>
             <DialogContent dividers>
                 <FormGroup>
                     {allCategories.length === 0 && (
                         <span>
-                            No categories found!
+                            {t('category.error.no_categories_found.label.info')}
                             <br />
-                            You should make some from settings.
+                            {t('category.error.no_categories_found.label.hint')}
                         </span>
                     )}
                     {allCategories.map((category) => (
@@ -92,10 +95,10 @@ export default function CategorySelect(props: IProps) {
             </DialogContent>
             <DialogActions>
                 <Button autoFocus onClick={handleCancel} color="primary">
-                    Cancel
+                    {t('global.button.cancel')}
                 </Button>
                 <Button onClick={handleOk} color="primary">
-                    Ok
+                    {t('global.button.ok')}
                 </Button>
             </DialogActions>
         </Dialog>