Introduce "Extension info" screen

package.json

@@ -120,6 +120,7 @@
     "tsx": "4.19.4",
     "typescript": "5.8.3",
     "vite": "6.3.4",
+    "vite-plugin-node-polyfills": "^0.23.0",
     "vite-tsconfig-paths": "5.1.4",
     "yargs": "17.7.2"
   }

public/locales/en.json

@@ -266,6 +266,7 @@
     },
     "label": {
       "add_repository_info": "You have to add a extension repository to be able to install extensions",
+      "age_rating": "Age rating",
       "installation_failed_one": "Could not install the extension",
       "installation_failed_other": "Could not install the extensions",
       "installed_successfully_one": "Extension installed",
@@ -471,6 +472,7 @@
       "type": "Type",
       "unknown": "Unknown",
       "username": "Username",
+      "version": "Version",
       "vertical": "Vertical",
       "warning": "Warning"
     },
@@ -1482,6 +1484,9 @@
         "source_not_found": "Could not find source. Check your installed extensions."
       }
     },
+    "extension_info": {
+      "title": "Extension info"
+    },
     "filter": {
       "save_search": {
         "dialog": {

src/App.tsx

@@ -41,6 +41,7 @@ const { CategorySettings } = loadable(
 );
 const { SourceConfigure } = loadable(() => import('@/modules/source/screens/SourceConfigure.tsx'), lazyLoadFallback);
 const { SourceMangas } = loadable(() => import('@/modules/source/screens/SourceMangas.tsx'), lazyLoadFallback);
+const { ExtensionInfo } = loadable(() => import('@/modules/extension/screens/ExtensionInfo.tsx'), lazyLoadFallback);
 const { Updates } = loadable(() => import('@/modules/updates/screens/Updates.tsx'), lazyLoadFallback);
 const { History } = loadable(() => import('@/modules/history/screens/History.tsx'), lazyLoadFallback);
 const { LibrarySettings } = loadable(() => import('@/modules/library/screens/LibrarySettings.tsx'), lazyLoadFallback);
@@ -163,6 +164,10 @@ const MainApp = () => {
                         <Route path={AppRoutes.sources.childRoutes.configure.match} element={<SourceConfigure />} />
                         <Route path={AppRoutes.sources.childRoutes.searchAll.match} element={<SearchAll />} />
                     </Route>
+                    <Route path={AppRoutes.extension.match}>
+                        <Route index element={<Navigate to={AppRoutes.root.path} replace />} />
+                        <Route path={AppRoutes.extension.childRoutes.info.match} element={<ExtensionInfo />} />
+                    </Route>
                     <Route path={AppRoutes.downloads.match} element={<DownloadQueue />} />
                     <Route path={AppRoutes.manga.match}>
                         <Route path={AppRoutes.manga.childRoutes.reader.match} element={null} />

src/Asserts.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 { AssertionError } from 'assert';
+
+export function assertIsDefined<T>(value: T | undefined): asserts value is NonNullable<T> {
+    if (value === undefined || value === null) {
+        throw new AssertionError({ message: 'Value is undefined or null' });
+    }
+}

src/lib/graphql/generated/graphql.ts

@@ -40,6 +40,8 @@ export enum BackupRestoreState {
   Idle = 'IDLE',
   RestoringCategories = 'RESTORING_CATEGORIES',
   RestoringManga = 'RESTORING_MANGA',
+  RestoringMeta = 'RESTORING_META',
+  RestoringSettings = 'RESTORING_SETTINGS',
   Success = 'SUCCESS'
 }
 
@@ -53,6 +55,8 @@ export type BackupRestoreStatus = {
 export type BindTrackInput = {
   clientMutationId?: InputMaybe<Scalars['String']['input']>;
   mangaId: Scalars['Int']['input'];
+  /** This will only work if the tracker of the track record supports private tracking */
+  private?: InputMaybe<Scalars['Boolean']['input']>;
   remoteId: Scalars['LongString']['input'];
   trackerId: Scalars['Int']['input'];
 };
@@ -1062,6 +1066,7 @@ export type MangaType = {
   firstUnreadChapter?: Maybe<ChapterType>;
   genre: Array<Scalars['String']['output']>;
   hasDuplicateChapters: Scalars['Boolean']['output'];
+  highestNumberedChapter?: Maybe<ChapterType>;
   id: Scalars['Int']['output'];
   inLibrary: Scalars['Boolean']['output'];
   inLibraryAt: Scalars['LongString']['output'];
@@ -1556,6 +1561,13 @@ export type PartialSettingsType = Settings & {
   maxLogFiles?: Maybe<Scalars['Int']['output']>;
   maxLogFolderSize?: Maybe<Scalars['String']['output']>;
   maxSourcesInParallel?: Maybe<Scalars['Int']['output']>;
+  opdsChapterSortOrder?: Maybe<SortOrder>;
+  opdsEnablePageReadProgress?: Maybe<Scalars['Boolean']['output']>;
+  opdsItemsPerPage?: Maybe<Scalars['Int']['output']>;
+  opdsMarkAsReadOnDownload?: Maybe<Scalars['Boolean']['output']>;
+  opdsShowOnlyDownloadedChapters?: Maybe<Scalars['Boolean']['output']>;
+  opdsShowOnlyUnreadChapters?: Maybe<Scalars['Boolean']['output']>;
+  opdsUseBinaryFileSizes?: Maybe<Scalars['Boolean']['output']>;
   port?: Maybe<Scalars['Int']['output']>;
   socksProxyEnabled?: Maybe<Scalars['Boolean']['output']>;
   socksProxyHost?: Maybe<Scalars['String']['output']>;
@@ -1605,6 +1617,13 @@ export type PartialSettingsTypeInput = {
   maxLogFiles?: InputMaybe<Scalars['Int']['input']>;
   maxLogFolderSize?: InputMaybe<Scalars['String']['input']>;
   maxSourcesInParallel?: InputMaybe<Scalars['Int']['input']>;
+  opdsChapterSortOrder?: InputMaybe<SortOrder>;
+  opdsEnablePageReadProgress?: InputMaybe<Scalars['Boolean']['input']>;
+  opdsItemsPerPage?: InputMaybe<Scalars['Int']['input']>;
+  opdsMarkAsReadOnDownload?: InputMaybe<Scalars['Boolean']['input']>;
+  opdsShowOnlyDownloadedChapters?: InputMaybe<Scalars['Boolean']['input']>;
+  opdsShowOnlyUnreadChapters?: InputMaybe<Scalars['Boolean']['input']>;
+  opdsUseBinaryFileSizes?: InputMaybe<Scalars['Boolean']['input']>;
   port?: InputMaybe<Scalars['Int']['input']>;
   socksProxyEnabled?: InputMaybe<Scalars['Boolean']['input']>;
   socksProxyHost?: InputMaybe<Scalars['String']['input']>;
@@ -1666,6 +1685,8 @@ export type QueryCategoriesArgs = {
   last?: InputMaybe<Scalars['Int']['input']>;
   offset?: InputMaybe<Scalars['Int']['input']>;
   order?: InputMaybe<Array<CategoryOrderInput>>;
+  orderBy?: InputMaybe<CategoryOrderBy>;
+  orderByType?: InputMaybe<SortOrder>;
 };
 
 
@@ -1688,6 +1709,8 @@ export type QueryChaptersArgs = {
   last?: InputMaybe<Scalars['Int']['input']>;
   offset?: InputMaybe<Scalars['Int']['input']>;
   order?: InputMaybe<Array<ChapterOrderInput>>;
+  orderBy?: InputMaybe<ChapterOrderBy>;
+  orderByType?: InputMaybe<SortOrder>;
 };
 
 
@@ -1705,6 +1728,8 @@ export type QueryExtensionsArgs = {
   last?: InputMaybe<Scalars['Int']['input']>;
   offset?: InputMaybe<Scalars['Int']['input']>;
   order?: InputMaybe<Array<ExtensionOrderInput>>;
+  orderBy?: InputMaybe<ExtensionOrderBy>;
+  orderByType?: InputMaybe<SortOrder>;
 };
 
 
@@ -1722,6 +1747,8 @@ export type QueryMangasArgs = {
   last?: InputMaybe<Scalars['Int']['input']>;
   offset?: InputMaybe<Scalars['Int']['input']>;
   order?: InputMaybe<Array<MangaOrderInput>>;
+  orderBy?: InputMaybe<MangaOrderBy>;
+  orderByType?: InputMaybe<SortOrder>;
 };
 
 
@@ -1739,6 +1766,8 @@ export type QueryMetasArgs = {
   last?: InputMaybe<Scalars['Int']['input']>;
   offset?: InputMaybe<Scalars['Int']['input']>;
   order?: InputMaybe<Array<MetaOrderInput>>;
+  orderBy?: InputMaybe<MetaOrderBy>;
+  orderByType?: InputMaybe<SortOrder>;
 };
 
 
@@ -1766,6 +1795,8 @@ export type QuerySourcesArgs = {
   last?: InputMaybe<Scalars['Int']['input']>;
   offset?: InputMaybe<Scalars['Int']['input']>;
   order?: InputMaybe<Array<SourceOrderInput>>;
+  orderBy?: InputMaybe<SourceOrderBy>;
+  orderByType?: InputMaybe<SortOrder>;
 };
 
 
@@ -1783,6 +1814,8 @@ export type QueryTrackRecordsArgs = {
   last?: InputMaybe<Scalars['Int']['input']>;
   offset?: InputMaybe<Scalars['Int']['input']>;
   order?: InputMaybe<Array<TrackRecordOrderInput>>;
+  orderBy?: InputMaybe<TrackRecordOrderBy>;
+  orderByType?: InputMaybe<SortOrder>;
 };
 
 
@@ -1799,6 +1832,8 @@ export type QueryTrackersArgs = {
   last?: InputMaybe<Scalars['Int']['input']>;
   offset?: InputMaybe<Scalars['Int']['input']>;
   order?: InputMaybe<Array<TrackerOrderInput>>;
+  orderBy?: InputMaybe<TrackerOrderBy>;
+  orderByType?: InputMaybe<SortOrder>;
 };
 
 
@@ -1966,6 +2001,13 @@ export type Settings = {
   maxLogFiles?: Maybe<Scalars['Int']['output']>;
   maxLogFolderSize?: Maybe<Scalars['String']['output']>;
   maxSourcesInParallel?: Maybe<Scalars['Int']['output']>;
+  opdsChapterSortOrder?: Maybe<SortOrder>;
+  opdsEnablePageReadProgress?: Maybe<Scalars['Boolean']['output']>;
+  opdsItemsPerPage?: Maybe<Scalars['Int']['output']>;
+  opdsMarkAsReadOnDownload?: Maybe<Scalars['Boolean']['output']>;
+  opdsShowOnlyDownloadedChapters?: Maybe<Scalars['Boolean']['output']>;
+  opdsShowOnlyUnreadChapters?: Maybe<Scalars['Boolean']['output']>;
+  opdsUseBinaryFileSizes?: Maybe<Scalars['Boolean']['output']>;
   port?: Maybe<Scalars['Int']['output']>;
   socksProxyEnabled?: Maybe<Scalars['Boolean']['output']>;
   socksProxyHost?: Maybe<Scalars['String']['output']>;
@@ -2020,6 +2062,13 @@ export type SettingsType = Settings & {
   maxLogFiles: Scalars['Int']['output'];
   maxLogFolderSize: Scalars['String']['output'];
   maxSourcesInParallel: Scalars['Int']['output'];
+  opdsChapterSortOrder: SortOrder;
+  opdsEnablePageReadProgress: Scalars['Boolean']['output'];
+  opdsItemsPerPage: Scalars['Int']['output'];
+  opdsMarkAsReadOnDownload: Scalars['Boolean']['output'];
+  opdsShowOnlyDownloadedChapters: Scalars['Boolean']['output'];
+  opdsShowOnlyUnreadChapters: Scalars['Boolean']['output'];
+  opdsUseBinaryFileSizes: Scalars['Boolean']['output'];
   port: Scalars['Int']['output'];
   socksProxyEnabled: Scalars['Boolean']['output'];
   socksProxyHost: Scalars['String']['output'];
@@ -2364,6 +2413,7 @@ export type TrackRecordType = {
   libraryId?: Maybe<Scalars['LongString']['output']>;
   manga: MangaType;
   mangaId: Scalars['Int']['output'];
+  private: Scalars['Boolean']['output'];
   remoteId: Scalars['LongString']['output'];
   remoteUrl: Scalars['String']['output'];
   score: Scalars['Float']['output'];
@@ -2378,11 +2428,19 @@ export type TrackRecordType = {
 export type TrackSearchType = {
   __typename?: 'TrackSearchType';
   coverUrl: Scalars['String']['output'];
+  displayScore: Scalars['String']['output'];
+  finishedReadingDate: Scalars['LongString']['output'];
   id: Scalars['Int']['output'];
+  lastChapterRead: Scalars['Float']['output'];
+  libraryId?: Maybe<Scalars['LongString']['output']>;
+  private: Scalars['Boolean']['output'];
   publishingStatus: Scalars['String']['output'];
   publishingType: Scalars['String']['output'];
   remoteId: Scalars['LongString']['output'];
+  score: Scalars['Float']['output'];
   startDate: Scalars['String']['output'];
+  startedReadingDate: Scalars['LongString']['output'];
+  status: Scalars['Int']['output'];
   summary: Scalars['String']['output'];
   title: Scalars['String']['output'];
   totalChapters: Scalars['Int']['output'];
@@ -2439,7 +2497,9 @@ export type TrackerType = {
   name: Scalars['String']['output'];
   scores: Array<Scalars['String']['output']>;
   statuses: Array<TrackStatusType>;
-  supportsTrackDeletion?: Maybe<Scalars['Boolean']['output']>;
+  supportsPrivateTracking: Scalars['Boolean']['output'];
+  supportsReadingDates: Scalars['Boolean']['output'];
+  supportsTrackDeletion: Scalars['Boolean']['output'];
   trackRecords: TrackRecordNodeList;
 };
 
@@ -2719,10 +2779,14 @@ export enum UpdateStrategy {
 
 export type UpdateTrackInput = {
   clientMutationId?: InputMaybe<Scalars['String']['input']>;
+  /** This will only work if the tracker of the track record supports reading dates */
   finishDate?: InputMaybe<Scalars['LongString']['input']>;
   lastChapterRead?: InputMaybe<Scalars['Float']['input']>;
+  /** This will only work if the tracker of the track record supports private tracking */
+  private?: InputMaybe<Scalars['Boolean']['input']>;
   recordId: Scalars['Int']['input'];
   scoreString?: InputMaybe<Scalars['String']['input']>;
+  /** This will only work if the tracker of the track record supports reading dates */
   startDate?: InputMaybe<Scalars['LongString']['input']>;
   status?: InputMaybe<Scalars['Int']['input']>;
 };
@@ -2897,7 +2961,7 @@ export type TrackerBaseFieldsFragment = { __typename?: 'TrackerType', id: number
 
 export type TrackerSettingFieldsFragment = { __typename?: 'TrackerType', authUrl?: string | null, id: number, name: string, icon: string, isLoggedIn: boolean, isTokenExpired: boolean };
 
-export type TrackerBindFieldsFragment = { __typename?: 'TrackerType', icon: string, supportsTrackDeletion?: boolean | null, scores: Array<string>, id: number, name: string, isLoggedIn: boolean, isTokenExpired: boolean, statuses: Array<{ __typename?: 'TrackStatusType', name: string, value: number }>, trackRecords: { __typename?: 'TrackRecordNodeList', nodes: Array<{ __typename?: 'TrackRecordType', id: number, remoteId: string, trackerId: number, remoteUrl: string, title: string, status: number, lastChapterRead: number, totalChapters: number, score: number, displayScore: string, startDate: string, finishDate: string }> } };
+export type TrackerBindFieldsFragment = { __typename?: 'TrackerType', icon: string, supportsTrackDeletion: boolean, scores: Array<string>, id: number, name: string, isLoggedIn: boolean, isTokenExpired: boolean, statuses: Array<{ __typename?: 'TrackStatusType', name: string, value: number }>, trackRecords: { __typename?: 'TrackRecordNodeList', nodes: Array<{ __typename?: 'TrackRecordType', id: number, remoteId: string, trackerId: number, remoteUrl: string, title: string, status: number, lastChapterRead: number, totalChapters: number, score: number, displayScore: string, startDate: string, finishDate: string }> } };
 
 export type TrackRecordSearchFieldsFragment = { __typename?: 'TrackSearchType', id: number, remoteId: string, title: string, trackingUrl: string, coverUrl: string, publishingType: string, startDate: string, publishingStatus: string, summary: string };
 
@@ -3477,6 +3541,13 @@ export type GetDownloadStatusQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetDownloadStatusQuery = { __typename?: 'Query', downloadStatus: { __typename?: 'DownloadStatus', state: DownloaderState, queue: Array<{ __typename?: 'DownloadType', progress: number, state: DownloadState, tries: number, chapter: { __typename?: 'ChapterType', id: number, name: string, sourceOrder: number, isDownloaded: boolean }, manga: { __typename?: 'MangaType', id: number, title: string, downloadCount: number } }> } };
 
+export type GetExtensionQueryVariables = Exact<{
+  pkgName: Scalars['String']['input'];
+}>;
+
+
+export type GetExtensionQuery = { __typename?: 'Query', extension: { __typename?: 'ExtensionType', pkgName: string, name: string, lang: string, versionCode: number, versionName: string, iconUrl: string, repo?: string | null, isNsfw: boolean, isInstalled: boolean, isObsolete: boolean, hasUpdate: boolean } };
+
 export type GetExtensionsQueryVariables = Exact<{
   after?: InputMaybe<Scalars['Cursor']['input']>;
   before?: InputMaybe<Scalars['Cursor']['input']>;
@@ -3668,7 +3739,7 @@ export type GetTrackersSettingsQuery = { __typename?: 'Query', trackers: { __typ
 export type GetTrackersBindQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetTrackersBindQuery = { __typename?: 'Query', trackers: { __typename?: 'TrackerNodeList', totalCount: number, pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor?: string | null }, nodes: Array<{ __typename?: 'TrackerType', icon: string, supportsTrackDeletion?: boolean | null, scores: Array<string>, id: number, name: string, isLoggedIn: boolean, isTokenExpired: boolean, statuses: Array<{ __typename?: 'TrackStatusType', name: string, value: number }>, trackRecords: { __typename?: 'TrackRecordNodeList', nodes: Array<{ __typename?: 'TrackRecordType', id: number, remoteId: string, trackerId: number, remoteUrl: string, title: string, status: number, lastChapterRead: number, totalChapters: number, score: number, displayScore: string, startDate: string, finishDate: string }> } }> } };
+export type GetTrackersBindQuery = { __typename?: 'Query', trackers: { __typename?: 'TrackerNodeList', totalCount: number, pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor?: string | null }, nodes: Array<{ __typename?: 'TrackerType', icon: string, supportsTrackDeletion: boolean, scores: Array<string>, id: number, name: string, isLoggedIn: boolean, isTokenExpired: boolean, statuses: Array<{ __typename?: 'TrackStatusType', name: string, value: number }>, trackRecords: { __typename?: 'TrackRecordNodeList', nodes: Array<{ __typename?: 'TrackRecordType', id: number, remoteId: string, trackerId: number, remoteUrl: string, title: string, status: number, lastChapterRead: number, totalChapters: number, score: number, displayScore: string, startDate: string, finishDate: string }> } }> } };
 
 export type TrackerSearchQueryVariables = Exact<{
   query: Scalars['String']['input'];

src/lib/graphql/queries/ExtensionQuery.ts

@@ -10,6 +10,16 @@ import gql from 'graphql-tag';
 import { PAGE_INFO } from '@/lib/graphql/fragments/Fragments.ts';
 import { EXTENSION_LIST_FIELDS } from '@/lib/graphql/fragments/ExtensionFragments.ts';
 
+export const GET_EXTENSION = gql`
+    ${EXTENSION_LIST_FIELDS}
+
+    query GET_EXTENSION($pkgName: String!) {
+        extension(pkgName: $pkgName) {
+            ...EXTENSION_LIST_FIELDS
+        }
+    }
+`;
+
 // returns the current extensions from the database
 export const GET_EXTENSIONS = gql`
     ${EXTENSION_LIST_FIELDS}

src/lib/requests/RequestManager.ts

@@ -209,6 +209,8 @@ import {
     WebuiUpdateSubscription,
     UpdateLibraryMutation,
     UpdateLibraryMutationVariables,
+    GetExtensionQuery,
+    GetExtensionQueryVariables,
 } from '@/lib/graphql/generated/graphql.ts';
 import { GET_GLOBAL_METADATAS } from '@/lib/graphql/queries/GlobalMetadataQuery.ts';
 import { DELETE_GLOBAL_METADATA, SET_GLOBAL_METADATA } from '@/lib/graphql/mutations/GlobalMetadataMutation.ts';
@@ -218,7 +220,7 @@ import {
     GET_ABOUT,
     GET_WEBUI_UPDATE_STATUS,
 } from '@/lib/graphql/queries/ServerInfoQuery.ts';
-import { GET_EXTENSIONS } from '@/lib/graphql/queries/ExtensionQuery.ts';
+import { GET_EXTENSION, GET_EXTENSIONS } from '@/lib/graphql/queries/ExtensionQuery.ts';
 import {
     GET_EXTENSIONS_FETCH,
     INSTALL_EXTERNAL_EXTENSION,
@@ -1281,6 +1283,13 @@ export class RequestManager {
         return this.doRequest(GQLMethod.MUTATION, UPDATE_WEBUI, undefined, options);
     }
 
+    public useGetExtension(
+        pkgName: string,
+        options?: QueryHookOptions<GetExtensionQuery, GetExtensionQueryVariables>,
+    ): AbortableApolloUseQueryResponse<GetExtensionQuery, GetExtensionQueryVariables> {
+        return this.doRequest(GQLMethod.USE_QUERY, GET_EXTENSION, { pkgName }, options);
+    }
+
     public useGetExtensionList(
         options?: QueryHookOptions<GetExtensionsQuery, GetExtensionsQueryVariables>,
     ): AbortableApolloUseQueryResponse<GetExtensionsQuery, GetExtensionsQueryVariables> {

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 { getInstalledState, updateExtension } from '@/modules/extension/Extensions.utils.ts';
-import { getErrorMessage } from '@/lib/HelperFunctions.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 updateExtension(pkgName, isObsolete, action);
-                    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}"`);
-            }
             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>
+            <OptionalCardActionAreaLink disabled={!isInstalled} to={AppRoutes.extension.childRoutes.info.path(pkgName)}>
-                <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={name} />
+                <ListCardContent>
-                <Stack
+                    <ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={name} />
-                    sx={{
+                    <Stack
-                        justifyContent: 'center',
+                        sx={{
-                        flexGrow: 1,
+                            justifyContent: 'center',
-                        flexShrink: 1,
+                            flexGrow: 1,
-                        wordBreak: 'break-word',
+                            flexShrink: 1,
-                    }}
+                            wordBreak: 'break-word',
-                >
+                        }}
-                    <Typography variant="h6" component="h3">
+                    >
-                        {name}
+                        <Typography variant="h6" component="h3">
-                    </Typography>
+                            {name}
-                    <Typography variant="caption">
+                        </Typography>
-                        {langPress} {versionName}
+                        <Typography variant="caption">
-                        {isNsfw && (
+                            {langPress} {versionName}
-                            <Typography variant="caption" color="error">
+                            {isNsfw && (
-                                {' 18+'}
+                                <Typography variant="caption" color="error">
-                            </Typography>
+                                    {' 18+'}
-                        )}
+                                </Typography>
-                    </Typography>
+                            )}
-                    {showSourceRepo && <Typography variant="caption">{repo}</Typography>}
+                        </Typography>
-                </Stack>
+                        {showSourceRepo && <Typography variant="caption">{repo}</Typography>}
-                {isInstalled && (
+                    </Stack>
-                    <CustomTooltip title={t('settings.title')}>
+                    {isInstalled && (
-                        <IconButton onClick={showOptions} color="inherit">
+                        <CustomTooltip title={t('settings.title')}>
-                            <SettingsIcon />
+                            <IconButton
-                        </IconButton>
+                                component={Link}
-                    </CustomTooltip>
+                                to={AppRoutes.extension.childRoutes.info.path(pkgName)}
-                )}
+                                color="inherit"
-                <Button
+                                {...MUIUtil.preventRippleProp()}
-                    variant="outlined"
+                            >
-                    sx={{
+                                <SettingsIcon />
-                        color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit',
+                            </IconButton>
-                        flexShrink: 0,
+                        </CustomTooltip>
-                    }}
+                    )}
-                    onClick={() => handleButtonClick()}
+                    <Button
-                >
+                        variant="outlined"
-                    {t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}
+                        sx={{
-                </Button>
+                            color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit',
-            </ListCardContent>
+                            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
-            <StyledGroupedVirtuoso
+            persistKey="extensions"
-                persistKey="extensions"
+            heightToSubtract={tabsMenuHeight}
-                heightToSubtract={tabsMenuHeight}
+            overscan={window.innerHeight * 0.5}
-                overscan={window.innerHeight * 0.5}
+            groupCounts={groupCounts}
-                groupCounts={groupCounts}
+            groupContent={(index) => {
-                groupContent={(index) => {
+                const [groupName, groupExtensions] = groupedExtensions[index];
-                    const [groupName, groupExtensions] = groupedExtensions[index];
+                const isUpdateGroup = groupName === ExtensionGroupState.UPDATE_PENDING;
-                    const isUpdateGroup = groupName === ExtensionGroupState.UPDATE_PENDING;
 
-                    return (
+                return (
-                        <GroupHeader
+                    <GroupHeader
-                            groupName={groupName}
+                        groupName={groupName}
-                            isFirstItem={index === 0}
+                        isFirstItem={index === 0}
-                            groupExtensionIds={groupExtensions.map((extension) => extension.pkgName)}
+                        groupExtensionIds={groupExtensions.map((extension) => extension.pkgName)}
-                            isUpdateGroup={isUpdateGroup}
+                        isUpdateGroup={isUpdateGroup}
-                            updatingExtensionIds={updatingExtensionIds}
+                        updatingExtensionIds={updatingExtensionIds}
-                            setUpdatingExtensionIds={setUpdatingExtensionIds}
+                        setUpdatingExtensionIds={setUpdatingExtensionIds}
-                            handleExtensionUpdate={handleExtensionUpdate}
+                        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>
-                }}
+                );
-                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)}
-            />
-        </>
     );
 }

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'>;

vite.config.ts

@@ -13,6 +13,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
 import legacy from '@vitejs/plugin-legacy';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 // eslint-disable-next-line import/no-default-export
 export default defineConfig(() => ({
@@ -42,5 +43,8 @@ export default defineConfig(() => ({
                 'es/object/group-by',
             ],
         }),
+        nodePolyfills({
+            include: ['assert'],
+        }),
     ],
 }));