Introduce "Extension info" screen

src/modules/core/AppRoute.constants.ts

@@ -120,6 +120,17 @@ export const AppRoutes = {
             },
         },
     },
+
+    extension: {
+        match: 'extension',
+        path: '/extension',
+        childRoutes: {
+            info: {
+                match: ':pkgName',
+                path: (pkgName: string) => `/extension/${pkgName}`,
+            },
+        },
+    },
     downloads: {
         match: 'downloads',
         path: '/downloads',

src/modules/core/components/lists/cards/OptionalCardActionAreaLink.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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 { Link } from 'react-router-dom';
+import CardActionArea from '@mui/material/CardActionArea';
+import { ComponentProps } from 'react';
+
+export const OptionalCardActionAreaLink = ({
+    disabled,
+    children,
+    ...props
+}: ComponentProps<typeof CardActionArea> & ComponentProps<typeof Link> & { disabled?: boolean }) => {
+    if (disabled) {
+        return children;
+    }
+
+    return (
+        <CardActionArea component={Link} {...props}>
+            {children}
+        </CardActionArea>
+    );
+};

src/modules/extension/Extensions.utils.ts

@@ -23,8 +23,14 @@ import {
     toComparableLanguages,
     toUniqueLanguageCodes,
 } from '@/modules/core/utils/Languages.ts';
-import { extensionLanguageToTranslationKey } from '@/modules/extension/Extensions.constants.ts';
+import {
+    EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP,
+    extensionLanguageToTranslationKey,
+} from '@/modules/extension/Extensions.constants.ts';
 import { enhancedCleanup } from '@/util/Strings.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { makeToast } from '@/modules/core/utils/Toast.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 
 export const getInstalledState = (
     isInstalled: boolean,
@@ -137,3 +143,32 @@ export const filterExtensions = (
         .filter((extension) => showNsfw === undefined || showNsfw || !extension.isNsfw)
         .filter((extension) => query == null || enhancedCleanup(extension.name).includes(enhancedCleanup(query)));
 };
+
+export const updateExtension = async (
+    pkgName: TExtension['pkgName'],
+    isObsolete: boolean,
+    action: ExtensionAction,
+): Promise<void> => {
+    try {
+        switch (action) {
+            case ExtensionAction.INSTALL:
+                await requestManager.updateExtension(pkgName, { install: true, isObsolete }).response;
+                break;
+            case ExtensionAction.UNINSTALL:
+                await requestManager.updateExtension(pkgName, { uninstall: true, isObsolete }).response;
+                break;
+            case ExtensionAction.UPDATE:
+                await requestManager.updateExtension(pkgName, { update: true, isObsolete }).response;
+                break;
+            default:
+                throw new Error(`Unexpected ExtensionAction "${action}"`);
+        }
+    } catch (e) {
+        makeToast(
+            t(EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP[action], { count: 1 }),
+            'error',
+            getErrorMessage(e),
+        );
+        throw e;
+    }
+};

src/modules/extension/components/ExtensionCard.tsx

@@ -14,9 +14,9 @@ import { useTranslation } from 'react-i18next';
 import IconButton from '@mui/material/IconButton';
 import SettingsIcon from '@mui/icons-material/Settings';
 import Stack from '@mui/material/Stack';
+import { Link } from 'react-router-dom';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
-import { makeToast } from '@/modules/core/utils/Toast.ts';
 import {
     ExtensionAction,
     ExtensionState,
@@ -25,23 +25,23 @@ import {
     TExtension,
 } from '@/modules/extension/Extensions.types.ts';
 import {
-    EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP,
     EXTENSION_ACTION_TO_NEXT_ACTION_MAP,
     EXTENSION_ACTION_TO_STATE_MAP,
     INSTALLED_STATE_TO_TRANSLATION_KEY_MAP,
 } from '@/modules/extension/Extensions.constants.ts';
-import { getInstalledState } from '@/modules/extension/Extensions.utils.ts';
-import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { getInstalledState, updateExtension } from '@/modules/extension/Extensions.utils.ts';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip';
 import { ListCardAvatar } from '@/modules/core/components/lists/cards/ListCardAvatar.tsx';
 import { ListCardContent } from '@/modules/core/components/lists/cards/ListCardContent.tsx';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
+import { MUIUtil } from '@/lib/mui/MUI.util.ts';
+import { OptionalCardActionAreaLink } from '@/modules/core/components/lists/cards/OptionalCardActionAreaLink.tsx';
 
 interface IProps {
     extension: TExtension;
     handleUpdate: () => void;
     showSourceRepo: boolean;
     forcedState?: ExtensionState;
-    showOptions: () => void;
 }
 
 export function ExtensionCard(props: IProps) {
@@ -50,7 +50,6 @@ export function ExtensionCard(props: IProps) {
     const {
         extension: { name, lang, versionName, isInstalled, hasUpdate, isObsolete, pkgName, iconUrl, isNsfw, repo },
         handleUpdate,
-        showOptions,
         showSourceRepo,
         forcedState,
     } = props;
@@ -71,29 +70,14 @@ export function ExtensionCard(props: IProps) {
 
         try {
             setInstalledState(state);
-            switch (action) {
-                case ExtensionAction.INSTALL:
-                    await requestManager.updateExtension(pkgName, { install: true, isObsolete }).response;
-                    break;
-                case ExtensionAction.UNINSTALL:
-                    await requestManager.updateExtension(pkgName, { uninstall: true, isObsolete }).response;
-                    break;
-                case ExtensionAction.UPDATE:
-                    await requestManager.updateExtension(pkgName, { update: true, isObsolete }).response;
-                    break;
-                default:
-                    throw new Error(`Unexpected ExtensionAction "${action}"`);
-            }
+
+            await updateExtension(pkgName, isObsolete, action);
+
             setInstalledState(nextAction);
 
             handleUpdate();
-        } catch (e) {
+        } catch (_) {
             setInstalledState(getInstalledState(isInstalled, isObsolete, hasUpdate));
-            makeToast(
-                t(EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP[action], { count: 1 }),
-                'error',
-                getErrorMessage(e),
-            );
         }
     };
 
@@ -118,47 +102,54 @@ export function ExtensionCard(props: IProps) {
 
     return (
         <Card>
-            <ListCardContent>
-                <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={name} />
-                <Stack
-                    sx={{
-                        justifyContent: 'center',
-                        flexGrow: 1,
-                        flexShrink: 1,
-                        wordBreak: 'break-word',
-                    }}
-                >
-                    <Typography variant="h6" component="h3">
-                        {name}
-                    </Typography>
-                    <Typography variant="caption">
-                        {langPress} {versionName}
-                        {isNsfw && (
-                            <Typography variant="caption" color="error">
-                                {' 18+'}
-                            </Typography>
-                        )}
-                    </Typography>
-                    {showSourceRepo && <Typography variant="caption">{repo}</Typography>}
-                </Stack>
-                {isInstalled && (
-                    <CustomTooltip title={t('settings.title')}>
-                        <IconButton onClick={showOptions} color="inherit">
-                            <SettingsIcon />
-                        </IconButton>
-                    </CustomTooltip>
-                )}
-                <Button
-                    variant="outlined"
-                    sx={{
-                        color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit',
-                        flexShrink: 0,
-                    }}
-                    onClick={() => handleButtonClick()}
-                >
-                    {t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}
-                </Button>
-            </ListCardContent>
+            <OptionalCardActionAreaLink disabled={!isInstalled} to={AppRoutes.extension.childRoutes.info.path(pkgName)}>
+                <ListCardContent>
+                    <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={name} />
+                    <Stack
+                        sx={{
+                            justifyContent: 'center',
+                            flexGrow: 1,
+                            flexShrink: 1,
+                            wordBreak: 'break-word',
+                        }}
+                    >
+                        <Typography variant="h6" component="h3">
+                            {name}
+                        </Typography>
+                        <Typography variant="caption">
+                            {langPress} {versionName}
+                            {isNsfw && (
+                                <Typography variant="caption" color="error">
+                                    {' 18+'}
+                                </Typography>
+                            )}
+                        </Typography>
+                        {showSourceRepo && <Typography variant="caption">{repo}</Typography>}
+                    </Stack>
+                    {isInstalled && (
+                        <CustomTooltip title={t('settings.title')}>
+                            <IconButton
+                                component={Link}
+                                to={AppRoutes.extension.childRoutes.info.path(pkgName)}
+                                color="inherit"
+                                {...MUIUtil.preventRippleProp()}
+                            >
+                                <SettingsIcon />
+                            </IconButton>
+                        </CustomTooltip>
+                    )}
+                    <Button
+                        variant="outlined"
+                        sx={{
+                            color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit',
+                            flexShrink: 0,
+                        }}
+                        onClick={() => handleButtonClick()}
+                    >
+                        {t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}
+                    </Button>
+                </ListCardContent>
+            </OptionalCardActionAreaLink>
         </Card>
     );
 }

src/modules/extension/screens/ExtensionInfo.tsx

@@ -0,0 +1,237 @@
+/*
+ * 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 { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
+import { Metadata } from '@/modules/core/components/texts/Metadata.tsx';
+import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { EmptyViewAbsoluteCentered } from '@/modules/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { LoadingPlaceholder } from '@/modules/core/components/feedback/LoadingPlaceholder.tsx';
+import { ExtensionAction, InstalledState, TExtension } from '@/modules/extension/Extensions.types.ts';
+import { languageCodeToName, languageSortComparator } from '@/modules/core/utils/Languages.ts';
+import { assertIsDefined } from '@/Asserts.ts';
+import { StyledGroupItemWrapper } from '@/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx';
+import { ListCardContent } from '@/modules/core/components/lists/cards/ListCardContent.tsx';
+import {
+    getInstalledState,
+    translateExtensionLanguage,
+    updateExtension,
+} from '@/modules/extension/Extensions.utils.ts';
+import { Sources } from '@/modules/source/services/Sources.ts';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
+import { SourceConfigurableInfo, SourceIdInfo, SourceLanguageInfo } from '@/modules/source/Source.types.ts';
+import { MUIUtil } from '@/lib/mui/MUI.util.ts';
+import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
+import { OptionalCardActionAreaLink } from '@/modules/core/components/lists/cards/OptionalCardActionAreaLink.tsx';
+
+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();
+
+    return (
+        <Box sx={{ px: 1 }}>
+            <Button
+                sx={{
+                    width: '100%',
+                    color:
+                        getInstalledState(isInstalled, isObsolete, hasUpdate) === 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');
+                    }
+                }}
+            >
+                Uninstall
+            </Button>
+        </Box>
+    );
+};
+
+const SourceList = ({ sources }: { sources: (SourceIdInfo & SourceLanguageInfo & SourceConfigurableInfo)[] }) => {
+    const { t } = useTranslation();
+
+    return (
+        <Box sx={{ px: 1 }}>
+            {sources?.map((source) => (
+                <StyledGroupItemWrapper key={source.id} sx={{ px: 0 }}>
+                    <Card>
+                        <OptionalCardActionAreaLink
+                            disabled={!source.isConfigurable}
+                            to={AppRoutes.sources.childRoutes.configure.path(source.id)}
+                        >
+                            <ListCardContent>
+                                <Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
+                                    {translateExtensionLanguage(Sources.getLanguage(source))}
+                                </Typography>
+                                {source.isConfigurable && (
+                                    <CustomTooltip title={t('settings.title')}>
+                                        <IconButton
+                                            component={Link}
+                                            to={AppRoutes.sources.childRoutes.configure.path(source.id)}
+                                            color="inherit"
+                                            {...MUIUtil.preventRippleProp()}
+                                        >
+                                            <SettingsIcon />
+                                        </IconButton>
+                                    </CustomTooltip>
+                                )}
+                            </ListCardContent>
+                        </OptionalCardActionAreaLink>
+                    </Card>
+                </StyledGroupItemWrapper>
+            ))}
+        </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]);
+
+    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>
+    );
+};

src/modules/extension/screens/Extensions.tsx

@@ -15,7 +15,7 @@ import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useWindowEvent } from '@mantine/hooks';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -45,7 +45,6 @@ import {
 import { EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP } from '@/modules/extension/Extensions.constants.ts';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { ExtensionOptions } from '@/modules/extension/components/ExtensionOptions';
 import {
     createUpdateMetadataServerSettings,
     useMetadataServerSettings,
@@ -115,9 +114,6 @@ const GroupHeader = ({
 
 export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
     const { t } = useTranslation();
-    const navigate = useNavigate();
-    const { pathname, search, state } = useLocation<{ selectedExtensionPkg?: TExtension['pkgName'] }>();
-    const selectedExtensionPkg = state?.selectedExtensionPkg;
 
     const {
         data: serverSettingsData,
@@ -171,15 +167,6 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
 
     const handleExtensionUpdate = useCallback(() => setRefetchExtensions({}), []);
 
-    const setSelectedExtensionPkg = (newPkg: TExtension['pkgName'] | undefined) => {
-        navigate(pathname + search, {
-            replace: true,
-            state: {
-                selectedExtensionPkg: newPkg,
-            },
-        });
-    };
-
     const submitExternalExtension = (file: File) => {
         if (!file.name.toLowerCase().endsWith('apk')) {
             makeToast(t('global.error.label.invalid_file_type'), 'error');
@@ -288,51 +275,44 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
     }
 
     return (
-        <>
-            <StyledGroupedVirtuoso
-                persistKey="extensions"
-                heightToSubtract={tabsMenuHeight}
-                overscan={window.innerHeight * 0.5}
-                groupCounts={groupCounts}
-                groupContent={(index) => {
-                    const [groupName, groupExtensions] = groupedExtensions[index];
-                    const isUpdateGroup = groupName === ExtensionGroupState.UPDATE_PENDING;
+        <StyledGroupedVirtuoso
+            persistKey="extensions"
+            heightToSubtract={tabsMenuHeight}
+            overscan={window.innerHeight * 0.5}
+            groupCounts={groupCounts}
+            groupContent={(index) => {
+                const [groupName, groupExtensions] = groupedExtensions[index];
+                const isUpdateGroup = groupName === ExtensionGroupState.UPDATE_PENDING;
 
-                    return (
-                        <GroupHeader
-                            groupName={groupName}
-                            isFirstItem={index === 0}
-                            groupExtensionIds={groupExtensions.map((extension) => extension.pkgName)}
-                            isUpdateGroup={isUpdateGroup}
-                            updatingExtensionIds={updatingExtensionIds}
-                            setUpdatingExtensionIds={setUpdatingExtensionIds}
-                            handleExtensionUpdate={handleExtensionUpdate}
+                return (
+                    <GroupHeader
+                        groupName={groupName}
+                        isFirstItem={index === 0}
+                        groupExtensionIds={groupExtensions.map((extension) => extension.pkgName)}
+                        isUpdateGroup={isUpdateGroup}
+                        updatingExtensionIds={updatingExtensionIds}
+                        setUpdatingExtensionIds={setUpdatingExtensionIds}
+                        handleExtensionUpdate={handleExtensionUpdate}
+                    />
+                );
+            }}
+            computeItemKey={computeItemKey}
+            itemContent={(index) => {
+                const item = visibleExtensions[index];
+
+                return (
+                    <StyledGroupItemWrapper>
+                        <ExtensionCard
+                            extension={item}
+                            handleUpdate={handleExtensionUpdate}
+                            showSourceRepo={areMultipleReposInUse}
+                            forcedState={
+                                updatingExtensionIds.includes(item.pkgName) ? ExtensionState.UPDATING : undefined
+                            }
                         />
-                    );
-                }}
-                computeItemKey={computeItemKey}
-                itemContent={(index) => {
-                    const item = visibleExtensions[index];
-
-                    return (
-                        <StyledGroupItemWrapper>
-                            <ExtensionCard
-                                extension={item}
-                                handleUpdate={handleExtensionUpdate}
-                                showSourceRepo={areMultipleReposInUse}
-                                forcedState={
-                                    updatingExtensionIds.includes(item.pkgName) ? ExtensionState.UPDATING : undefined
-                                }
-                                showOptions={() => setSelectedExtensionPkg(item.pkgName)}
-                            />
-                        </StyledGroupItemWrapper>
-                    );
-                }}
-            />
-            <ExtensionOptions
-                extensionId={selectedExtensionPkg}
-                closeDialog={() => setSelectedExtensionPkg(undefined)}
-            />
-        </>
+                    </StyledGroupItemWrapper>
+                );
+            }}
+        />
     );
 }

src/modules/source/Source.types.ts

@@ -69,3 +69,4 @@ export type SourceDisplayNameInfo = Pick<SourceType, 'displayName'>;
 export type SourceNsfwInfo = Pick<SourceType, 'isNsfw'>;
 export type SourceRepoInfo = { extension: Pick<ExtensionType, 'repo'> };
 export type SourceMetaInfo = { meta: SourceMetaFieldsFragment[] };
+export type SourceConfigurableInfo = Pick<SourceType, 'isConfigurable'>;