ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduce "Extension info" screen

Browse Source
This commit is contained in:
schroda
2025-06-22 23:12:54 +02:00
parent 998400327f
commit 2e105a0539
16 changed files with 1236 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -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"
}

5
public/locales/en.json
View File

@@ -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": {

5
src/App.tsx
View File

@@ -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} />

15
src/Asserts.ts Normal file
View File

@@ -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' });
}
}

77
src/lib/graphql/generated/graphql.ts
View File

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

10
src/lib/graphql/queries/ExtensionQuery.ts
View File

@@ -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}

11
src/lib/requests/RequestManager.ts
View File

@@ -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> {

11
src/modules/core/AppRoute.constants.ts
View File

@@ -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',

27
src/modules/core/components/lists/cards/OptionalCardActionAreaLink.tsx Normal file
View File

@@ -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>
);
};

37
src/modules/extension/Extensions.utils.ts
View File

@@ -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;
}
};

43
src/modules/extension/components/ExtensionCard.tsx
View File

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

237
src/modules/extension/screens/ExtensionInfo.tsx Normal file
View File

@@ -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>
);
};

22
src/modules/extension/screens/Extensions.tsx
View File

@@ -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,7 +275,6 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
}
return (
<>
<StyledGroupedVirtuoso
persistKey="extensions"
heightToSubtract={tabsMenuHeight}
@@ -323,16 +309,10 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
forcedState={
updatingExtensionIds.includes(item.pkgName) ? ExtensionState.UPDATING : undefined
}
showOptions={() => setSelectedExtensionPkg(item.pkgName)}
/>
</StyledGroupItemWrapper>
);
}}
/>
<ExtensionOptions
extensionId={selectedExtensionPkg}
closeDialog={() => setSelectedExtensionPkg(undefined)}
/>
</>
);
}

1
src/modules/source/Source.types.ts
View File

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

4
vite.config.ts
View File

@@ -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'],
}),
],
}));

726
yarn.lock
View File

File diff suppressed because it is too large Load Diff