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/screens/settings/Categories.tsx

@@ -34,6 +34,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import NavbarContext from 'components/context/NavbarContext';
 import client, { useQuery } from 'util/client';
 import { ICategory } from 'typings';
+import { useTranslation } from 'react-i18next';
 
 const getItemStyle = (
     isDragging: boolean,
@@ -49,9 +50,11 @@ const getItemStyle = (
 });
 
 export default function Categories() {
+    const { t } = useTranslation();
+
     const { setTitle, setAction } = useContext(NavbarContext);
     useEffect(() => {
-        setTitle('Categories');
+        setTitle(t('category.title.categories'));
         setAction(null);
     }, []);
 
@@ -196,14 +199,16 @@ export default function Categories() {
             </Fab>
             <Dialog open={dialogOpen} onClose={handleDialogCancel}>
                 <DialogTitle id="form-dialog-title">
-                    {categoryToEdit === -1 ? 'New Catalog' : 'Edit Catalog'}
+                    {categoryToEdit === -1
+                        ? t('category.dialog.title.new_category')
+                        : t('category.dialog.title.edit_category')}
                 </DialogTitle>
                 <DialogContent>
                     <TextField
                         autoFocus
                         margin="dense"
                         id="name"
-                        label="Category Name"
+                        label={t('category.label.category_name')}
                         type="text"
                         fullWidth
                         value={dialogName}
@@ -217,15 +222,15 @@ export default function Categories() {
                                 color="default"
                             />
                         }
-                        label="Default category when adding new manga to library"
+                        label={t('category.label.use_as_default_category')}
                     />
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={handleDialogCancel} color="primary">
-                        Cancel
+                        {t('global.button.cancel')}
                     </Button>
                     <Button onClick={handleDialogSubmit} color="primary">
-                        Submit
+                        {t('global.button.submit')}
                     </Button>
                 </DialogActions>
             </Dialog>