Settings language add description (#294)

* Add translation notice to language setting

* Make local source guide link readable in dark mode

src/i18n/locale/en.json

@@ -247,7 +247,8 @@
         "language_with_code": "Language with code: {{code}}"
       },
       "title": {
-        "enabled_languages": "Allowed Languages"
+        "enabled_languages": "Allowed Languages",
+        "weblate": "Weblate"
       }
     },
     "sort": {
@@ -419,7 +420,8 @@
       "image_cache_description": "Reduces the data consumption and improves the performance when a already requested image gets requested again",
       "manga_item_width": "Manga item width",
       "show_nsfw": "Show NSFW",
-      "show_nsfw_description": "Hide NSFW extensions and sources"
+      "show_nsfw_description": "Hide NSFW extensions and sources",
+      "language_description": "Feel free to translate the project on"
     },
     "server_address": {
       "dialog": {

src/screens/Settings.tsx

@@ -29,7 +29,7 @@ import DialogContentText from '@mui/material/DialogContentText';
 import TextField from '@mui/material/TextField';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import Slider from '@mui/material/Slider';
-import { DialogTitle, ListItemButton, MenuItem, Select } from '@mui/material';
+import { DialogTitle, Link, ListItemButton, MenuItem, Select } from '@mui/material';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import NavbarContext from 'components/context/NavbarContext';
 import DarkTheme from 'components/context/DarkTheme';
@@ -175,7 +175,17 @@ export default function Settings() {
                     <ListItemIcon>
                         <LanguageIcon />
                     </ListItemIcon>
-                    <ListItemText primary={t('global.language.label.language')} />
+                    <ListItemText
+                        primary={t('global.language.label.language')}
+                        secondary={
+                            <>
+                                <span>{t('settings.label.language_description')} </span>
+                                <Link href="https://hosted.weblate.org/projects/suwayomi/tachidesk-webui">
+                                    {t('global.language.title.weblate')}
+                                </Link>
+                            </>
+                        }
+                    />
                     <ListItemSecondaryAction>
                         <Select
                             MenuProps={{ PaperProps: { style: { maxHeight: 150 } } }}

src/screens/SourceMangas.tsx

@@ -19,6 +19,7 @@ import SourceGridLayout from 'components/source/GridLayouts';
 import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 import { IManga, IMangaCard, ISource, ISourceFilters } from 'typings';
 import { useTranslation } from 'react-i18next';
+import Link from '@mui/material/Link';
 
 interface IPos {
     position: number;
@@ -227,9 +228,9 @@ export default function SourceMangas({ popular }: { popular: boolean }) {
             messageExtra = (
                 <>
                     <span>{t('source.local_source.label.checkout')} </span>
-                    <a href="https://github.com/Suwayomi/Tachidesk-Server/wiki/Local-Source">
+                    <Link href="https://github.com/Suwayomi/Tachidesk-Server/wiki/Local-Source">
                         {t('source.local_source.label.guide')}
-                    </a>
+                    </Link>
                 </>
             );
         }