Rename folder "modules" to "features"

src/features/extension/Extensions.constants.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 {
+    ExtensionAction,
+    ExtensionGroupState,
+    ExtensionState,
+    InstalledState,
+    InstalledStates,
+} from '@/features/extension/Extensions.types.ts';
+import { TranslationKey } from '@/Base.types.ts';
+import { DefaultLanguage } from '@/features/core/utils/Languages.ts';
+
+export const EXTENSION_ACTION_TO_STATE_MAP: { [action in ExtensionAction]: ExtensionState } = {
+    [ExtensionAction.UPDATE]: ExtensionState.UPDATING,
+    [ExtensionAction.UNINSTALL]: ExtensionState.UNINSTALLING,
+    [ExtensionAction.INSTALL]: ExtensionState.INSTALLING,
+} as const;
+
+export const EXTENSION_ACTION_TO_NEXT_ACTION_MAP: { [action in ExtensionAction]: ExtensionAction } = {
+    [ExtensionAction.UPDATE]: ExtensionAction.UNINSTALL,
+    [ExtensionAction.UNINSTALL]: ExtensionAction.INSTALL,
+    [ExtensionAction.INSTALL]: ExtensionAction.UNINSTALL,
+} as const;
+
+export const INSTALLED_STATE_TO_TRANSLATION_KEY_MAP: { [installedState in InstalledStates]: TranslationKey } = {
+    [InstalledState.UNINSTALL]: 'extension.action.label.uninstall',
+    [InstalledState.INSTALL]: 'extension.action.label.install',
+    [InstalledState.UPDATE]: 'extension.action.label.update',
+    [InstalledState.OBSOLETE]: 'extension.state.label.obsolete',
+    [InstalledState.UPDATING]: 'extension.state.label.updating',
+    [InstalledState.UNINSTALLING]: 'extension.state.label.uninstalling',
+    [InstalledState.INSTALLING]: 'extension.state.label.installing',
+} as const;
+
+export const EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP: {
+    [action in ExtensionAction]: TranslationKey;
+} = {
+    [ExtensionAction.UPDATE]: 'extension.label.update_failed',
+    [ExtensionAction.INSTALL]: 'extension.label.installation_failed',
+    [ExtensionAction.UNINSTALL]: 'extension.label.uninstallation_failed',
+};
+
+export const extensionLanguageToTranslationKey: { [state in ExtensionGroupState | DefaultLanguage]: TranslationKey } = {
+    [ExtensionGroupState.INSTALLED]: 'extension.state.label.installed',
+    [ExtensionGroupState.UPDATE_PENDING]: 'extension.state.label.update_pending',
+    [ExtensionGroupState.OBSOLETE]: 'extension.state.label.obsolete',
+    [DefaultLanguage.ALL]: 'extension.language.all',
+    [DefaultLanguage.OTHER]: 'extension.language.other',
+    [DefaultLanguage.LOCAL_SOURCE]: 'extension.language.other',
+    [DefaultLanguage.PINNED]: 'global.label.pinned',
+    [DefaultLanguage.LAST_USED_SOURCE]: 'global.label.last_used',
+};

src/features/extension/Extensions.types.ts

@@ -0,0 +1,59 @@
+/*
+ * 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 { ExtensionType } from '@/lib/graphql/generated/graphql.ts';
+
+export enum ExtensionAction {
+    UPDATE = 'UPDATE',
+    UNINSTALL = 'UNINSTALL',
+    INSTALL = 'INSTALL',
+}
+
+export enum ExtensionState {
+    OBSOLETE = 'OBSOLETE',
+    UPDATING = 'UPDATING',
+    UNINSTALLING = 'UNINSTALLING',
+    INSTALLING = 'INSTALLING',
+}
+
+export type InstalledStates = ExtensionAction | ExtensionState;
+
+export const InstalledState = { ...ExtensionAction, ...ExtensionState } as const;
+
+export enum ExtensionGroupState {
+    INSTALLED = 'INSTALLED',
+    UPDATE_PENDING = 'UPDATE_PENDING',
+    OBSOLETE = 'OBSOLETE',
+}
+
+export type TExtension = Pick<
+    ExtensionType,
+    | 'pkgName'
+    | 'name'
+    | 'lang'
+    | 'versionCode'
+    | 'versionName'
+    | 'iconUrl'
+    | 'repo'
+    | 'isNsfw'
+    | 'isInstalled'
+    | 'isObsolete'
+    | 'hasUpdate'
+>;
+
+export type GroupedExtensionsResult<KEY extends string = string> = [KEY, TExtension[]][];
+
+export type GroupedByExtensionState = {
+    [state in ExtensionGroupState]: TExtension[];
+};
+
+export type GroupedByLanguage = {
+    [language: string]: TExtension[];
+};
+
+export type GroupedExtensions = GroupedByExtensionState & GroupedByLanguage;

src/features/extension/Extensions.utils.ts

@@ -0,0 +1,174 @@
+/*
+ * 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 { t } from 'i18next';
+import {
+    ExtensionAction,
+    ExtensionGroupState,
+    ExtensionState,
+    GroupedExtensionsResult,
+    InstalledState,
+    TExtension,
+} from '@/features/extension/Extensions.types.ts';
+import {
+    DefaultLanguage,
+    languageCodeToName,
+    languageSpecialSortComparator,
+    toComparableLanguage,
+    toComparableLanguages,
+    toUniqueLanguageCodes,
+} from '@/features/core/utils/Languages.ts';
+import {
+    EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP,
+    extensionLanguageToTranslationKey,
+} from '@/features/extension/Extensions.constants.ts';
+import { enhancedCleanup } from '@/util/Strings.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { makeToast } from '@/features/core/utils/Toast.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+
+export const getInstalledState = (
+    isInstalled: boolean,
+    isObsolete: boolean,
+    hasUpdate: boolean,
+): ExtensionAction | ExtensionState.OBSOLETE => {
+    if (isObsolete) {
+        return InstalledState.OBSOLETE;
+    }
+
+    if (hasUpdate) {
+        return InstalledState.UPDATE;
+    }
+
+    return isInstalled ? InstalledState.UNINSTALL : InstalledState.INSTALL;
+};
+
+export const isExtensionState = (value: string): boolean =>
+    [ExtensionGroupState.INSTALLED, ExtensionGroupState.UPDATE_PENDING, ExtensionGroupState.OBSOLETE].includes(
+        value as ExtensionGroupState,
+    );
+
+export const isPinnedOrLastUsedSource = (languageCode: string): boolean =>
+    [DefaultLanguage.PINNED, DefaultLanguage.LAST_USED_SOURCE].includes(languageCode as DefaultLanguage);
+
+export const isExtensionStateOrLanguage = (languageCode: string): boolean =>
+    isExtensionState(languageCode) ||
+    isPinnedOrLastUsedSource(languageCode) ||
+    [DefaultLanguage.ALL, DefaultLanguage.OTHER, DefaultLanguage.LOCAL_SOURCE].includes(
+        languageCode as DefaultLanguage,
+    );
+
+export const translateExtensionLanguage = (languageCode: string): string =>
+    isExtensionStateOrLanguage(languageCode)
+        ? t(extensionLanguageToTranslationKey[languageCode as ExtensionGroupState | DefaultLanguage])
+        : languageCodeToName(languageCode);
+
+export function groupExtensionsByLanguage(extensions: TExtension[]): GroupedExtensionsResult {
+    const extensionsByLanguage = Object.groupBy<ExtensionGroupState | string, TExtension>(extensions, (extension) => {
+        if (!extension.isInstalled) {
+            return extension.lang;
+        }
+
+        if (extension.hasUpdate) {
+            return ExtensionGroupState.UPDATE_PENDING;
+        }
+
+        if (extension.isObsolete) {
+            return ExtensionGroupState.OBSOLETE;
+        }
+
+        return ExtensionGroupState.INSTALLED;
+    });
+
+    // sort groups by language
+    const extensionsBySortedLanguage = Object.entries(extensionsByLanguage).toSorted(([a], [b]) => {
+        const extensionGroupStates = Object.values(ExtensionGroupState);
+
+        const isAState = extensionGroupStates.includes(a as ExtensionGroupState);
+        const isAObsolete = ExtensionGroupState.OBSOLETE === a;
+        const isAUpdatable = ExtensionGroupState.UPDATE_PENDING === a;
+
+        const isBState = extensionGroupStates.includes(b as ExtensionGroupState);
+        const isBObsolete = ExtensionGroupState.OBSOLETE === b;
+        const isBUpdatable = ExtensionGroupState.UPDATE_PENDING === b;
+
+        if (isAObsolete || (isAState && !isBState) || (isAUpdatable && !isBObsolete)) {
+            return -1;
+        }
+        if (isBObsolete || (!isAState && isBState) || (!isAUpdatable && isBUpdatable)) {
+            return 1;
+        }
+
+        return languageSpecialSortComparator(a, b);
+    });
+
+    const groupedExtensionsSortedByLanguage = extensionsBySortedLanguage.map(([language, extensionsOfLanguage]) => [
+        language,
+        (extensionsOfLanguage ?? []).toSorted((a, b) => a.name.localeCompare(b.name)),
+    ]) satisfies GroupedExtensionsResult;
+
+    return groupedExtensionsSortedByLanguage.filter(([, extensionsOfLanguage]) => !!extensionsOfLanguage.length);
+}
+
+export const getLanguagesFromExtensions = (extensions: TExtension[]): string[] => [
+    ...new Set(extensions.map((extension) => extension.lang)),
+];
+
+export const filterExtensions = (
+    extensions: TExtension[],
+    {
+        selectedLanguages,
+        showNsfw,
+        query,
+    }: {
+        selectedLanguages?: string[];
+        showNsfw?: boolean;
+        query?: string | null | undefined;
+    } = {},
+): TExtension[] => {
+    const normalizedSelectedLanguages = toComparableLanguages(toUniqueLanguageCodes(selectedLanguages ?? []));
+
+    return extensions
+        .filter(
+            (extension) =>
+                !selectedLanguages ||
+                normalizedSelectedLanguages.includes(toComparableLanguage(extension.lang)) ||
+                extension.isInstalled,
+        )
+        .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/features/extension/components/ExtensionCard.tsx

@@ -0,0 +1,152 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+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 { requestManager } from '@/lib/requests/RequestManager.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import {
+    ExtensionAction,
+    ExtensionState,
+    InstalledState,
+    InstalledStates,
+    TExtension,
+} from '@/features/extension/Extensions.types.ts';
+import {
+    EXTENSION_ACTION_TO_NEXT_ACTION_MAP,
+    EXTENSION_ACTION_TO_STATE_MAP,
+    INSTALLED_STATE_TO_TRANSLATION_KEY_MAP,
+} from '@/features/extension/Extensions.constants.ts';
+import { getInstalledState, updateExtension } from '@/features/extension/Extensions.utils.ts';
+import { CustomTooltip } from '@/features/core/components/CustomTooltip';
+import { ListCardAvatar } from '@/features/core/components/lists/cards/ListCardAvatar.tsx';
+import { ListCardContent } from '@/features/core/components/lists/cards/ListCardContent.tsx';
+import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
+import { MUIUtil } from '@/lib/mui/MUI.util.ts';
+import { OptionalCardActionAreaLink } from '@/features/core/components/lists/cards/OptionalCardActionAreaLink.tsx';
+import { languageCodeToName } from '@/features/core/utils/Languages.ts';
+
+interface IProps {
+    extension: TExtension;
+    handleUpdate: () => void;
+    showSourceRepo: boolean;
+    forcedState?: ExtensionState;
+}
+
+export function ExtensionCard(props: IProps) {
+    const { t } = useTranslation();
+
+    const {
+        extension: { name, lang, versionName, isInstalled, hasUpdate, isObsolete, pkgName, iconUrl, isNsfw, repo },
+        handleUpdate,
+        showSourceRepo,
+        forcedState,
+    } = props;
+    const [localInstalledState, setInstalledState] = useState<InstalledStates>(
+        getInstalledState(isInstalled, isObsolete, hasUpdate),
+    );
+    const installedState = forcedState ?? localInstalledState;
+
+    useEffect(() => {
+        setInstalledState(getInstalledState(isInstalled, isObsolete, hasUpdate));
+    }, [getInstalledState(isInstalled, isObsolete, hasUpdate)]);
+
+    const requestExtensionAction = async (action: ExtensionAction): Promise<void> => {
+        const nextAction = EXTENSION_ACTION_TO_NEXT_ACTION_MAP[action];
+        const state = EXTENSION_ACTION_TO_STATE_MAP[action];
+
+        try {
+            setInstalledState(state);
+
+            await updateExtension(pkgName, isObsolete, action);
+
+            setInstalledState(nextAction);
+
+            handleUpdate();
+        } catch (_) {
+            setInstalledState(getInstalledState(isInstalled, isObsolete, hasUpdate));
+        }
+    };
+
+    function handleButtonClick() {
+        switch (installedState) {
+            case ExtensionAction.INSTALL:
+            case ExtensionAction.UPDATE:
+            case ExtensionAction.UNINSTALL:
+                requestExtensionAction(installedState).catch(
+                    defaultPromiseErrorHandler(`ExtensionCard:handleButtonClick(${installedState})`),
+                );
+                break;
+            case ExtensionState.OBSOLETE:
+                requestExtensionAction(ExtensionAction.UNINSTALL).catch(
+                    defaultPromiseErrorHandler(`ExtensionCard:handleButtonClick(${installedState})`),
+                );
+                break;
+            default:
+                break;
+        }
+    }
+
+    return (
+        <Card>
+            <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">
+                            {isInstalled ? `${languageCodeToName(lang)} ` : ''}
+                            {versionName}
+                            {isNsfw && (
+                                <Typography variant="caption" color="error">
+                                    {' 18+'}
+                                </Typography>
+                            )}
+                        </Typography>
+                        {showSourceRepo && <Typography variant="caption">{repo}</Typography>}
+                    </Stack>
+                    {isInstalled && (
+                        <CustomTooltip title={t('settings.title')}>
+                            <IconButton color="inherit" {...MUIUtil.preventRippleProp()}>
+                                <SettingsIcon />
+                            </IconButton>
+                        </CustomTooltip>
+                    )}
+                    <Button
+                        variant="outlined"
+                        sx={{
+                            color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit',
+                            flexShrink: 0,
+                        }}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            handleButtonClick();
+                        }}
+                    >
+                        {t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}
+                    </Button>
+                </ListCardContent>
+            </OptionalCardActionAreaLink>
+        </Card>
+    );
+}

src/features/extension/components/ExtensionOptions.tsx

@@ -0,0 +1,103 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import Card from '@mui/material/Card';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { useNavigate } from 'react-router-dom';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import { useMemo } from 'react';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder';
+import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered';
+import { getErrorMessage } from '@/lib/HelperFunctions';
+import { CustomTooltip } from '@/features/core/components/CustomTooltip';
+import { AppRoutes } from '@/features/core/AppRoute.constants';
+import { translateExtensionLanguage } from '@/features/extension/Extensions.utils';
+import { StyledGroupItemWrapper } from '@/features/core/components/virtuoso/StyledGroupItemWrapper.tsx';
+import { TExtension } from '@/features/extension/Extensions.types.ts';
+import { Sources } from '@/features/source/services/Sources.ts';
+import { ListCardContent } from '@/features/core/components/lists/cards/ListCardContent.tsx';
+
+interface IExtensionOptions {
+    extensionId: TExtension['pkgName'] | undefined;
+    closeDialog: () => void;
+}
+
+export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions) {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+
+    const {
+        data,
+        loading: isLoading,
+        error,
+        refetch,
+    } = requestManager.useGetSourceList({ notifyOnNetworkStatusChange: true });
+
+    if (error) {
+        return <Dialog open={!!extensionId} onClose={closeDialog} />;
+    }
+
+    const relevantSources = useMemo(() => {
+        if (!extensionId) return [];
+
+        return data?.sources.nodes.filter((source) => source.extension.pkgName === extensionId);
+    }, [data?.sources.nodes, extensionId]);
+
+    return (
+        <Dialog open={!!extensionId} onClose={closeDialog} maxWidth="md" fullWidth>
+            <DialogTitle>{t('extension.settings.dialog.title')}</DialogTitle>
+            <DialogContent>
+                {isLoading && <LoadingPlaceholder />}
+                {error && (
+                    <EmptyViewAbsoluteCentered
+                        message={t('global.error.label.failed_to_load_data')}
+                        messageExtra={getErrorMessage(error)}
+                        retry={() => refetch().catch(defaultPromiseErrorHandler('ExtensionOptions::refetch'))}
+                    />
+                )}
+                {!isLoading && !error && (
+                    <Box>
+                        {relevantSources?.map((source) => (
+                            <StyledGroupItemWrapper key={source.id} sx={{ px: 0 }}>
+                                <Card>
+                                    <ListCardContent>
+                                        <Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
+                                            {translateExtensionLanguage(Sources.getLanguage(source))}
+                                        </Typography>
+                                        {source.isConfigurable && (
+                                            <CustomTooltip title={t('settings.title')}>
+                                                <IconButton
+                                                    onClick={() =>
+                                                        navigate(
+                                                            AppRoutes.sources.childRoutes.configure.path(source.id),
+                                                        )
+                                                    }
+                                                    color="inherit"
+                                                >
+                                                    <SettingsIcon />
+                                                </IconButton>
+                                            </CustomTooltip>
+                                        )}
+                                    </ListCardContent>
+                                </Card>
+                            </StyledGroupItemWrapper>
+                        ))}
+                    </Box>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}

src/features/extension/screens/ExtensionInfo.tsx

@@ -0,0 +1,251 @@
+/*
+ * 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 '@/features/core/components/SpinnerImage.tsx';
+import { Metadata } from '@/features/core/components/texts/Metadata.tsx';
+import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
+import { ExtensionAction, InstalledState, TExtension } from '@/features/extension/Extensions.types.ts';
+import { languageCodeToName, languageSortComparator } from '@/features/core/utils/Languages.ts';
+import { assertIsDefined } from '@/Asserts.ts';
+import { StyledGroupItemWrapper } from '@/features/core/components/virtuoso/StyledGroupItemWrapper.tsx';
+import { ListCardContent } from '@/features/core/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 '@/features/core/components/CustomTooltip.tsx';
+import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
+import { SourceConfigurableInfo, SourceIdInfo, SourceLanguageInfo } from '@/features/source/Source.types.ts';
+import { MUIUtil } from '@/lib/mui/MUI.util.ts';
+import { useBackButton } from '@/features/core/hooks/useBackButton.ts';
+import { createUpdateSourceMetadata, useGetSourceMetadata } from '@/features/source/services/SourceMetadata.ts';
+import { makeToast } from '@/features/core/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>
+    );
+};

src/features/extension/screens/Extensions.tsx

@@ -0,0 +1,319 @@
+/*
+ * 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 { useCallback, useEffect, useMemo, useState } from 'react';
+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 Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { useWindowEvent } from '@mantine/hooks';
+import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { AppbarSearch } from '@/features/core/components/AppbarSearch.tsx';
+import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
+import { makeToast } from '@/features/core/utils/Toast.ts';
+import { LanguageSelect } from '@/features/core/components/inputs/LanguageSelect.tsx';
+import { ExtensionCard } from '@/features/extension/components/ExtensionCard.tsx';
+import { StyledGroupedVirtuoso } from '@/features/core/components/virtuoso/StyledGroupedVirtuoso.tsx';
+import { StyledGroupHeader } from '@/features/core/components/virtuoso/StyledGroupHeader.tsx';
+import { StyledGroupItemWrapper } from '@/features/core/components/virtuoso/StyledGroupItemWrapper.tsx';
+import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { VirtuosoUtil } from '@/lib/virtuoso/Virtuoso.util.tsx';
+import {
+    groupExtensionsByLanguage,
+    getLanguagesFromExtensions,
+    translateExtensionLanguage,
+    filterExtensions,
+} from '@/features/extension/Extensions.utils.ts';
+import {
+    ExtensionAction,
+    ExtensionGroupState,
+    ExtensionState,
+    TExtension,
+} from '@/features/extension/Extensions.types.ts';
+import { EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP } from '@/features/extension/Extensions.constants.ts';
+import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import {
+    createUpdateMetadataServerSettings,
+    useMetadataServerSettings,
+} from '@/features/settings/services/ServerSettingsMetadata.ts';
+import { MetadataBrowseSettings } from '@/features/browse/Browse.types.ts';
+import { useAppAction } from '@/features/navigation-bar/hooks/useAppAction.ts';
+import { SearchParam } from '@/features/core/Core.types.ts';
+
+const LANGUAGE = 0;
+const EXTENSIONS = 1;
+
+const GroupHeader = ({
+    groupName,
+    isFirstItem,
+    groupExtensionIds,
+    isUpdateGroup,
+    updatingExtensionIds,
+    setUpdatingExtensionIds,
+    handleExtensionUpdate,
+}: {
+    groupName: string;
+    isFirstItem: boolean;
+    groupExtensionIds: TExtension['pkgName'][];
+    isUpdateGroup: boolean;
+    updatingExtensionIds: TExtension['pkgName'][];
+    setUpdatingExtensionIds: (ids: TExtension['pkgName'][]) => void;
+    handleExtensionUpdate: () => void;
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <StyledGroupHeader
+            key={groupName}
+            isFirstItem={isFirstItem}
+            sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', pr: 1 }}
+        >
+            <Typography variant="h5" component="h2">
+                {translateExtensionLanguage(groupName)}
+            </Typography>
+            {isUpdateGroup && (
+                <Button
+                    disabled={!!updatingExtensionIds.length}
+                    variant="contained"
+                    onClick={() => {
+                        setUpdatingExtensionIds(groupExtensionIds);
+
+                        requestManager
+                            .updateExtensions(groupExtensionIds, { update: true })
+                            .response.then(() => handleExtensionUpdate())
+                            .catch((e) =>
+                                makeToast(
+                                    t(EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP[ExtensionAction.UPDATE], {
+                                        count: groupExtensionIds.length,
+                                    }),
+                                    'error',
+                                    getErrorMessage(e),
+                                ),
+                            )
+                            .finally(() => setUpdatingExtensionIds([]));
+                    }}
+                >
+                    {t('extension.action.label.update_all')}
+                </Button>
+            )}
+        </StyledGroupHeader>
+    );
+};
+
+export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
+    const { t } = useTranslation();
+
+    const {
+        data: serverSettingsData,
+        loading: areServerSettingsLoading,
+        error: serverSettingsError,
+        refetch: refetchServerSettings,
+    } = requestManager.useGetServerSettings({ notifyOnNetworkStatusChange: true });
+    const [fetchExtensions, { data, loading: areExtensionsLoading, error: extensionsError }] =
+        requestManager.useExtensionListFetch();
+
+    const {
+        settings: { extensionLanguages: shownLangs, showNsfw },
+    } = useMetadataServerSettings();
+    const updateMetadataServerSettings = createUpdateMetadataServerSettings<
+        keyof Pick<MetadataBrowseSettings, 'extensionLanguages'>
+    >((e) => makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)));
+
+    const [query] = useQueryParam(SearchParam.QUERY, StringParam);
+
+    const [updatingExtensionIds, setUpdatingExtensionIds] = useState<string[]>([]);
+    const [refetchExtensions, setRefetchExtensions] = useState({});
+
+    const isLoading = areServerSettingsLoading || areExtensionsLoading;
+    const error = serverSettingsError ?? extensionsError;
+
+    const areReposDefined = !!serverSettingsData?.settings.extensionRepos.length;
+    const areMultipleReposInUse = (serverSettingsData?.settings.extensionRepos.length ?? 0) > 1;
+
+    const allExtensions = data?.fetchExtensions?.extensions;
+    const allLangs = useMemo(() => getLanguagesFromExtensions(allExtensions ?? []), [allExtensions]);
+
+    const filteredExtensions = useMemo(
+        () => filterExtensions(allExtensions ?? [], { selectedLanguages: shownLangs, showNsfw, query }),
+        [allExtensions, shownLangs, showNsfw, query],
+    );
+    const groupedExtensions = useMemo(() => groupExtensionsByLanguage(filteredExtensions), [filteredExtensions]);
+    const groupCounts = useMemo(
+        () => groupedExtensions.map((extensionGroup) => extensionGroup[EXTENSIONS].length),
+        [groupedExtensions],
+    );
+    const visibleExtensions = useMemo(
+        () => groupedExtensions.map(([, extensions]) => extensions).flat(1),
+        [groupedExtensions],
+    );
+
+    const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
+        groupCounts,
+        useCallback((index) => groupedExtensions[index][LANGUAGE], [groupedExtensions]),
+        useCallback((index) => visibleExtensions[index].pkgName, [visibleExtensions]),
+    );
+
+    const handleExtensionUpdate = useCallback(() => setRefetchExtensions({}), []);
+
+    const submitExternalExtension = (file: File) => {
+        if (!file.name.toLowerCase().endsWith('apk')) {
+            makeToast(t('global.error.label.invalid_file_type'), 'error');
+            return;
+        }
+
+        makeToast(t('extension.label.installing_file'), 'info');
+        requestManager
+            .installExternalExtension(file)
+            .response.then(() => {
+                handleExtensionUpdate();
+                makeToast(t('extension.label.installed_successfully'), 'success');
+            })
+            .catch((e) => makeToast(t('extension.label.installation_failed'), 'error', getErrorMessage(e)));
+    };
+
+    useEffect(() => {
+        fetchExtensions();
+    }, [refetchExtensions]);
+
+    useAppAction(
+        <>
+            <AppbarSearch />
+            <CustomTooltip title={t('extension.action.label.install_external')}>
+                <IconButton
+                    onClick={() => {
+                        const input = document.createElement('input');
+                        input.style.display = 'none';
+                        input.type = 'file';
+                        input.onchange = () => {
+                            const file = input.files?.[0];
+                            if (file) {
+                                submitExternalExtension(file);
+                            }
+                        };
+
+                        document.documentElement.appendChild(input);
+                        input.click();
+                        document.documentElement.removeChild(input);
+                    }}
+                    color="inherit"
+                >
+                    <AddIcon />
+                </IconButton>
+            </CustomTooltip>
+
+            <LanguageSelect
+                selectedLanguages={shownLangs}
+                setSelectedLanguages={(languages: string[]) =>
+                    updateMetadataServerSettings('extensionLanguages', languages)
+                }
+                languages={allLangs}
+            />
+        </>,
+        [t, shownLangs, allLangs],
+    );
+
+    useWindowEvent('drop', async (e) => {
+        e.preventDefault();
+        const files = await fromEvent(e);
+        submitExternalExtension(files[0] as File);
+    });
+    useWindowEvent('dragover', (e) => {
+        e.preventDefault();
+    });
+
+    if (isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (error) {
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={getErrorMessage(error)}
+                retry={() => {
+                    if (serverSettingsError) {
+                        refetchServerSettings().catch(defaultPromiseErrorHandler('Extensions::refetchServerSettings'));
+                    }
+
+                    if (extensionsError) {
+                        fetchExtensions().catch(defaultPromiseErrorHandler('Extensions::refetchExtensions'));
+                    }
+                }}
+            />
+        );
+    }
+
+    const showAddRepoInfo = !allExtensions?.length && !areReposDefined;
+    if (showAddRepoInfo) {
+        return (
+            <Stack
+                sx={{
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    rowGap: '10px',
+                    paddingTop: '20px',
+                }}
+            >
+                <Typography>{t('extension.label.add_repository_info')}</Typography>
+                <Button component={Link} variant="contained" to={AppRoutes.settings.childRoutes.browse.path}>
+                    {t('settings.title')}
+                </Button>
+            </Stack>
+        );
+    }
+
+    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;
+
+                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
+                            }
+                        />
+                    </StyledGroupItemWrapper>
+                );
+            }}
+        />
+    );
+}