Feature/extension list show info when no repo is defined (#556)

* Show add extension repo info in case no repo is defined

* Update extension repositories localization

src/i18n/locale/en.json

@@ -223,6 +223,7 @@
       }
     },
     "label": {
+      "add_repository_info": "You have to add a extension repository to be able to install extensions",
       "installation_failed": "Could not install the extension",
       "installed_successfully": "Extension installed",
       "installing_file": "Installing extension file…",
@@ -249,9 +250,9 @@
             }
           },
           "label": {
-            "description": "Add custom repositories from which extensions can be installed",
+            "description": "Add repositories from which extensions can be installed",
             "disclaimer": "<strong>Suwayomi does not provide any support for 3rd party repositories or extensions!</strong><br/>Use with caution as there could be malicious actors making those repositories.<br/>You as the user need to verify the security and that you trust any repository or extension.",
-            "title": "Custom repositories"
+            "title": "Extension repositories"
           }
         }
       }

src/screens/Extensions.tsx

@@ -11,9 +11,10 @@ import { fromEvent } from 'file-selector';
 import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
 import { StringParam, useQueryParam } from 'use-query-params';
-import { Tooltip, useMediaQuery } from '@mui/material';
+import { Button, Stack, Tooltip, Typography, useMediaQuery } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
+import { Link } from 'react-router-dom';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { extensionDefaultLangs, DefaultLanguage, langSortCmp } from '@/util/language';
 import { useLocalStorage } from '@/util/useLocalStorage';
@@ -99,7 +100,8 @@ export function Extensions() {
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
 
     const { data: serverSettingsData } = requestManager.useGetServerSettings();
-    const areMultipleReposInUse = !!serverSettingsData?.settings.extensionRepos.length; // tachiyomi repo is used by default
+    const areReposDefined = !!serverSettingsData?.settings.extensionRepos.length;
+    const areMultipleReposInUse = (serverSettingsData?.settings.extensionRepos.length ?? 0) > 1;
 
     const inputRef = useRef<HTMLInputElement>(null);
     const { setTitle, setAction } = useContext(NavBarContext);
@@ -206,6 +208,18 @@ export function Extensions() {
         return <LoadingPlaceholder />;
     }
 
+    const showAddRepoInfo = !allExtensions?.length && !areReposDefined;
+    if (showAddRepoInfo) {
+        return (
+            <Stack sx={{ paddingTop: '20px' }} alignItems="center" justifyContent="center" rowGap="10px">
+                <Typography>{t('extension.label.add_repository_info')}</Typography>
+                <Button component={Link} variant="contained" to="/settings/server">
+                    {t('settings.title')}
+                </Button>
+            </Stack>
+        );
+    }
+
     return (
         <>
             {toasts}