Structure "extension" in sub-features

src/App.tsx

@@ -45,7 +45,10 @@ const { SourceConfigure } = loadable(
     lazyLoadFallback,
 );
 const { SourceMangas } = loadable(() => import('@/features/source/browse/screens/SourceMangas.tsx'), lazyLoadFallback);
-const { ExtensionInfo } = loadable(() => import('@/features/extension/screens/ExtensionInfo.tsx'), lazyLoadFallback);
+const { ExtensionInfo } = loadable(
+    () => import('@/features/extension/info/screens/ExtensionInfo.tsx'),
+    lazyLoadFallback,
+);
 const { Updates } = loadable(() => import('@/features/updates/screens/Updates.tsx'), lazyLoadFallback);
 const { History } = loadable(() => import('@/features/history/screens/History.tsx'), lazyLoadFallback);
 const { LibrarySettings } = loadable(() => import('@/features/library/screens/LibrarySettings.tsx'), lazyLoadFallback);

src/features/extension/info/components/ActionButton.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import { INSTALLED_STATE_TO_TRANSLATION_KEY_MAP } from '@/features/extension/Extensions.constants.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { getInstalledState, updateExtension } from '@/features/extension/Extensions.utils.ts';
+import { useBackButton } from '@/base/hooks/useBackButton.ts';
+import { ExtensionAction, InstalledState, TExtension } from '@/features/extension/Extensions.types.ts';
+
+export const ActionButton = ({ pkgName, isInstalled, isObsolete, hasUpdate }: TExtension) => {
+    const handleBack = useBackButton();
+    const { t } = useTranslation();
+
+    const installedState = getInstalledState(isInstalled, isObsolete, hasUpdate);
+
+    return (
+        <Box sx={{ px: 1 }}>
+            <Button
+                sx={{
+                    width: '100%',
+                    color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit',
+                }}
+                variant="outlined"
+                size="large"
+                onClick={async () => {
+                    const action = hasUpdate ? ExtensionAction.UPDATE : ExtensionAction.UNINSTALL;
+                    try {
+                        await updateExtension(pkgName, isObsolete, action);
+
+                        if (action === ExtensionAction.UNINSTALL) {
+                            handleBack();
+                        }
+                    } catch (e) {
+                        defaultPromiseErrorHandler('ExtensionInfo::ActionButton::onClick');
+                    }
+                }}
+            >
+                {t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}
+            </Button>
+        </Box>
+    );
+};

src/features/extension/info/components/ExtensionMetadata.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { ComponentProps } from 'react';
+import Divider from '@mui/material/Divider';
+import { Metadata } from '@/base/components/texts/Metadata.tsx';
+
+export const ExtensionMetadata = ({
+    addDivider = true,
+    ...props
+}: ComponentProps<typeof Metadata> & { addDivider?: boolean }) => (
+    <>
+        <Metadata
+            {...props}
+            stackProps={{
+                // eslint-disable-next-line react/destructuring-assignment
+                ...props.stackProps,
+                sx: {
+                    // eslint-disable-next-line react/destructuring-assignment
+                    ...props.stackProps?.sx,
+                    flexDirection: 'column-reverse',
+                    alignItems: 'center',
+                    flexGrow: 1,
+                },
+            }}
+            titleProps={{
+                // eslint-disable-next-line react/destructuring-assignment
+                ...props.titleProps,
+                variant: 'body2',
+            }}
+        />
+        {addDivider && <Divider orientation="vertical" sx={{ height: '25px' }} />}
+    </>
+);

src/features/extension/info/components/Header.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { SpinnerImage } from '@/base/components/SpinnerImage.tsx';
+import { TExtension } from '@/features/extension/Extensions.types.ts';
+
+export const Header = ({ name, pkgName, iconUrl, repo }: TExtension) => (
+    <Stack sx={{ alignItems: 'center' }}>
+        <SpinnerImage alt={name} src={requestManager.getValidImgUrlFor(iconUrl)} />
+        <Typography variant="h5" component="h2">
+            {name}
+        </Typography>
+        <Typography variant="body2" color="textSecondary">
+            {pkgName.replace('eu.kanade.tachiyomi.extension.', '')}
+        </Typography>
+        {repo && (
+            <Typography variant="body2" color="textSecondary">
+                {repo}
+            </Typography>
+        )}
+    </Stack>
+);

src/features/extension/info/components/Meta.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Stack from '@mui/material/Stack';
+import { useTranslation } from 'react-i18next';
+import { TExtension } from '@/features/extension/Extensions.types.ts';
+import { ExtensionMetadata } from '@/features/extension/info/components/ExtensionMetadata.tsx';
+import { languageCodeToName } from '@/base/utils/Languages.ts';
+
+export const Meta = ({ versionName, lang, isNsfw }: TExtension) => {
+    const { t } = useTranslation();
+
+    return (
+        <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+            <ExtensionMetadata title={t('global.label.version')} value={versionName} />
+            <ExtensionMetadata title={t('global.language.label.language')} value={languageCodeToName(lang)} />
+            {isNsfw && (
+                <ExtensionMetadata
+                    title={t('extension.label.age_rating')}
+                    value="18+"
+                    valueProps={{ color: 'error' }}
+                />
+            )}
+        </Stack>
+    );
+};

src/features/extension/info/components/SourceCard.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import Card from '@mui/material/Card';
+import IconButton from '@mui/material/IconButton';
+import SettingsIcon from '@mui/icons-material/Settings';
+import Switch from '@mui/material/Switch';
+import CardActionArea from '@mui/material/CardActionArea';
+import { MUIUtil } from '@/lib/mui/MUI.util.ts';
+import { AppRoutes } from '@/base/AppRoute.constants.ts';
+import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
+import { Sources } from '@/features/source/services/Sources.ts';
+import { translateExtensionLanguage } from '@/features/extension/Extensions.utils.ts';
+import { ListCardContent } from '@/base/components/lists/cards/ListCardContent.tsx';
+import { StyledGroupItemWrapper } from '@/base/components/virtuoso/StyledGroupItemWrapper.tsx';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { makeToast } from '@/base/utils/Toast.ts';
+import { createUpdateSourceMetadata, useGetSourceMetadata } from '@/features/source/services/SourceMetadata.ts';
+import { SourceConfigurableInfo, SourceIdInfo, SourceLanguageInfo } from '@/features/source/Source.types.ts';
+
+export const SourceCard = (source: SourceIdInfo & SourceLanguageInfo & SourceConfigurableInfo) => {
+    const { id, isConfigurable } = source;
+
+    const { t } = useTranslation();
+    const { isEnabled } = useGetSourceMetadata(source);
+
+    const updateSetting = createUpdateSourceMetadata(source, (e) =>
+        makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
+    );
+
+    return (
+        <StyledGroupItemWrapper key={id} sx={{ px: 0 }}>
+            <Card>
+                <CardActionArea onClick={() => updateSetting('isEnabled', !isEnabled)}>
+                    <ListCardContent>
+                        <Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
+                            {translateExtensionLanguage(Sources.getLanguage(source))}
+                        </Typography>
+                        {isConfigurable && (
+                            <CustomTooltip title={t('settings.title')}>
+                                <IconButton
+                                    component={Link}
+                                    to={AppRoutes.sources.childRoutes.configure.path(id)}
+                                    color="inherit"
+                                    onClick={(e) => e.stopPropagation()}
+                                    {...MUIUtil.preventRippleProp()}
+                                >
+                                    <SettingsIcon />
+                                </IconButton>
+                            </CustomTooltip>
+                        )}
+                        <Switch checked={isEnabled} />
+                    </ListCardContent>
+                </CardActionArea>
+            </Card>
+        </StyledGroupItemWrapper>
+    );
+};

src/features/extension/info/screens/ExtensionInfo.tsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { useMemo } from 'react';
+import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewAbsoluteCentered.tsx';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
+import { languageSortComparator } from '@/base/utils/Languages.ts';
+import { assertIsDefined } from '@/base/Asserts.ts';
+import { Sources } from '@/features/source/services/Sources.ts';
+import { Header } from '@/features/extension/info/components/Header.tsx';
+import { Meta } from '@/features/extension/info/components/Meta.tsx';
+import { ActionButton } from '@/features/extension/info/components/ActionButton.tsx';
+import { SourceCard } from '@/features/extension/info/components/SourceCard.tsx';
+
+export const ExtensionInfo = () => {
+    const { t } = useTranslation();
+    const { pkgName } = useParams<{ pkgName: string }>();
+
+    useAppTitle(t('source.extension_info.title'));
+
+    const extensionResponse = requestManager.useGetExtension(pkgName);
+    const sourcesResponse = requestManager.useGetSourceList();
+
+    const { extension } = extensionResponse.data ?? {};
+    const sources = useMemo(() => {
+        if (!sourcesResponse.data?.sources) {
+            return [];
+        }
+
+        return sourcesResponse.data.sources.nodes
+            .filter((source) => source.extension.pkgName === extension?.pkgName)
+            .sort((a, b) => languageSortComparator(Sources.getLanguage(a), Sources.getLanguage(b)));
+    }, [extension?.pkgName, sourcesResponse.data]);
+
+    const isLoading = extensionResponse.loading || sourcesResponse.loading;
+    const error = extensionResponse.error || sourcesResponse.error;
+
+    if (isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (error) {
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={getErrorMessage(extensionResponse.error)}
+                retry={() => {
+                    if (extensionResponse.error) {
+                        extensionResponse
+                            .refetch()
+                            .catch(defaultPromiseErrorHandler('ExtensionInfo::extension::refetch'));
+                    }
+
+                    if (sourcesResponse.error) {
+                        sourcesResponse.refetch().catch(defaultPromiseErrorHandler('ExtensionInfo::sources::refetch'));
+                    }
+                }}
+            />
+        );
+    }
+
+    assertIsDefined(extension);
+
+    return (
+        <Stack sx={{ gap: 2 }}>
+            <Header {...extension} />
+            <Meta {...extension} />
+            <ActionButton {...extension} />
+            <Box sx={{ px: 1 }}>
+                {sources.map((source) => (
+                    <SourceCard key={source.id} {...source} />
+                ))}
+            </Box>
+        </Stack>
+    );
+};

src/features/extension/screens/ExtensionInfo.tsx

@@ -1,251 +0,0 @@
-/*
- * Copyright (C) Contributors to the Suwayomi project
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import { useTranslation } from 'react-i18next';
-import { useParams, Link } from 'react-router-dom';
-import { ComponentProps, useMemo } from 'react';
-import Card from '@mui/material/Card';
-import IconButton from '@mui/material/IconButton';
-import SettingsIcon from '@mui/icons-material/Settings';
-import Divider from '@mui/material/Divider';
-import Switch from '@mui/material/Switch';
-import CardActionArea from '@mui/material/CardActionArea';
-import { SpinnerImage } from '@/base/components/SpinnerImage.tsx';
-import { Metadata } from '@/base/components/texts/Metadata.tsx';
-import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
-import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewAbsoluteCentered.tsx';
-import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
-import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
-import { ExtensionAction, InstalledState, TExtension } from '@/features/extension/Extensions.types.ts';
-import { languageCodeToName, languageSortComparator } from '@/base/utils/Languages.ts';
-import { assertIsDefined } from '@/base/Asserts.ts';
-import { StyledGroupItemWrapper } from '@/base/components/virtuoso/StyledGroupItemWrapper.tsx';
-import { ListCardContent } from '@/base/components/lists/cards/ListCardContent.tsx';
-import {
-    getInstalledState,
-    translateExtensionLanguage,
-    updateExtension,
-} from '@/features/extension/Extensions.utils.ts';
-import { Sources } from '@/features/source/services/Sources.ts';
-import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
-import { AppRoutes } from '@/base/AppRoute.constants.ts';
-import { SourceConfigurableInfo, SourceIdInfo, SourceLanguageInfo } from '@/features/source/Source.types.ts';
-import { MUIUtil } from '@/lib/mui/MUI.util.ts';
-import { useBackButton } from '@/base/hooks/useBackButton.ts';
-import { createUpdateSourceMetadata, useGetSourceMetadata } from '@/features/source/services/SourceMetadata.ts';
-import { makeToast } from '@/base/utils/Toast.ts';
-import { INSTALLED_STATE_TO_TRANSLATION_KEY_MAP } from '@/features/extension/Extensions.constants.ts';
-
-const Header = ({ name, pkgName, iconUrl, repo }: TExtension) => (
-    <Stack sx={{ alignItems: 'center' }}>
-        <SpinnerImage alt={name} src={requestManager.getValidImgUrlFor(iconUrl)} />
-        <Typography variant="h5" component="h2">
-            {name}
-        </Typography>
-        <Typography variant="body2" color="textSecondary">
-            {pkgName.replace('eu.kanade.tachiyomi.extension.', '')}
-        </Typography>
-        {repo && (
-            <Typography variant="body2" color="textSecondary">
-                {repo}
-            </Typography>
-        )}
-    </Stack>
-);
-
-const ExtensionMetadata = ({
-    addDivider = true,
-    ...props
-}: ComponentProps<typeof Metadata> & { addDivider?: boolean }) => (
-    <>
-        <Metadata
-            {...props}
-            stackProps={{
-                // eslint-disable-next-line react/destructuring-assignment
-                ...props.stackProps,
-                sx: {
-                    // eslint-disable-next-line react/destructuring-assignment
-                    ...props.stackProps?.sx,
-                    flexDirection: 'column-reverse',
-                    alignItems: 'center',
-                    flexGrow: 1,
-                },
-            }}
-            titleProps={{
-                // eslint-disable-next-line react/destructuring-assignment
-                ...props.titleProps,
-                variant: 'body2',
-            }}
-        />
-        {addDivider && <Divider orientation="vertical" sx={{ height: '25px' }} />}
-    </>
-);
-
-const Meta = ({ versionName, lang, isNsfw }: TExtension) => {
-    const { t } = useTranslation();
-
-    return (
-        <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-            <ExtensionMetadata title={t('global.label.version')} value={versionName} />
-            <ExtensionMetadata title={t('global.language.label.language')} value={languageCodeToName(lang)} />
-            {isNsfw && (
-                <ExtensionMetadata
-                    title={t('extension.label.age_rating')}
-                    value="18+"
-                    valueProps={{ color: 'error' }}
-                />
-            )}
-        </Stack>
-    );
-};
-
-const ActionButton = ({ pkgName, isInstalled, isObsolete, hasUpdate }: TExtension) => {
-    const handleBack = useBackButton();
-    const { t } = useTranslation();
-
-    const installedState = getInstalledState(isInstalled, isObsolete, hasUpdate);
-
-    return (
-        <Box sx={{ px: 1 }}>
-            <Button
-                sx={{
-                    width: '100%',
-                    color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit',
-                }}
-                variant="outlined"
-                size="large"
-                onClick={async () => {
-                    const action = hasUpdate ? ExtensionAction.UPDATE : ExtensionAction.UNINSTALL;
-                    try {
-                        await updateExtension(pkgName, isObsolete, action);
-
-                        if (action === ExtensionAction.UNINSTALL) {
-                            handleBack();
-                        }
-                    } catch (e) {
-                        defaultPromiseErrorHandler('ExtensionInfo::ActionButton::onClick');
-                    }
-                }}
-            >
-                {t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}
-            </Button>
-        </Box>
-    );
-};
-
-const SourceCard = (source: SourceIdInfo & SourceLanguageInfo & SourceConfigurableInfo) => {
-    const { id, isConfigurable } = source;
-
-    const { t } = useTranslation();
-    const { isEnabled } = useGetSourceMetadata(source);
-
-    const updateSetting = createUpdateSourceMetadata(source, (e) =>
-        makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
-    );
-
-    return (
-        <StyledGroupItemWrapper key={id} sx={{ px: 0 }}>
-            <Card>
-                <CardActionArea onClick={() => updateSetting('isEnabled', !isEnabled)}>
-                    <ListCardContent>
-                        <Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
-                            {translateExtensionLanguage(Sources.getLanguage(source))}
-                        </Typography>
-                        {isConfigurable && (
-                            <CustomTooltip title={t('settings.title')}>
-                                <IconButton
-                                    component={Link}
-                                    to={AppRoutes.sources.childRoutes.configure.path(id)}
-                                    color="inherit"
-                                    onClick={(e) => e.stopPropagation()}
-                                    {...MUIUtil.preventRippleProp()}
-                                >
-                                    <SettingsIcon />
-                                </IconButton>
-                            </CustomTooltip>
-                        )}
-                        <Switch checked={isEnabled} />
-                    </ListCardContent>
-                </CardActionArea>
-            </Card>
-        </StyledGroupItemWrapper>
-    );
-};
-
-const SourceList = ({ sources }: { sources: (SourceIdInfo & SourceLanguageInfo & SourceConfigurableInfo)[] }) => (
-    <Box sx={{ px: 1 }}>
-        {sources.map((source) => (
-            <SourceCard key={source.id} {...source} />
-        ))}
-    </Box>
-);
-
-export const ExtensionInfo = () => {
-    const { t } = useTranslation();
-    const { pkgName } = useParams<{ pkgName: string }>();
-
-    useAppTitle(t('source.extension_info.title'));
-
-    const extensionResponse = requestManager.useGetExtension(pkgName);
-    const sourcesResponse = requestManager.useGetSourceList();
-
-    const { extension } = extensionResponse.data ?? {};
-    const sources = useMemo(() => {
-        if (!sourcesResponse.data?.sources) {
-            return [];
-        }
-
-        return sourcesResponse.data.sources.nodes
-            .filter((source) => source.extension.pkgName === extension?.pkgName)
-            .sort((a, b) => languageSortComparator(Sources.getLanguage(a), Sources.getLanguage(b)));
-    }, [extension?.pkgName, sourcesResponse.data]);
-
-    const isLoading = extensionResponse.loading || sourcesResponse.loading;
-    const error = extensionResponse.error || sourcesResponse.error;
-
-    if (isLoading) {
-        return <LoadingPlaceholder />;
-    }
-
-    if (error) {
-        return (
-            <EmptyViewAbsoluteCentered
-                message={t('global.error.label.failed_to_load_data')}
-                messageExtra={getErrorMessage(extensionResponse.error)}
-                retry={() => {
-                    if (extensionResponse.error) {
-                        extensionResponse
-                            .refetch()
-                            .catch(defaultPromiseErrorHandler('ExtensionInfo::extension::refetch'));
-                    }
-
-                    if (sourcesResponse.error) {
-                        sourcesResponse.refetch().catch(defaultPromiseErrorHandler('ExtensionInfo::sources::refetch'));
-                    }
-                }}
-            />
-        );
-    }
-
-    assertIsDefined(extension);
-
-    return (
-        <Stack sx={{ gap: 2 }}>
-            <Header {...extension} />
-            <Meta {...extension} />
-            <ActionButton {...extension} />
-            <SourceList sources={sources} />
-        </Stack>
-    );
-};