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

Add functionality to pin sources

Browse Source
This commit is contained in:
schroda
2025-05-17 22:17:15 +02:00
parent cab2469ec1
commit 822e47084e
11 changed files with 77 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/core/utils/Languages.ts
View File

@@ -14,12 +14,14 @@ export enum DefaultLanguage {
ALL = 'all',
OTHER = 'other',
LOCAL_SOURCE = 'localsourcelang',
PINNED = 'pinned',
}
const DEFAULT_LANGUAGE_TO_TRANSLATION: Record<DefaultLanguage, TranslationKey> = {
[DefaultLanguage.ALL]: 'extension.language.all',
[DefaultLanguage.OTHER]: 'extension.language.other',
[DefaultLanguage.LOCAL_SOURCE]: 'extension.language.other',
[DefaultLanguage.PINNED]: 'global.label.pinned',
};
type LanguageObject = ISOLanguage & { orgCode: string; isoCode: string };

1
src/modules/extension/Extensions.constants.ts
View File

@@ -53,4 +53,5 @@ export const extensionLanguageToTranslationKey: { [state in ExtensionGroupState
[DefaultLanguage.ALL]: 'extension.language.all',
[DefaultLanguage.OTHER]: 'extension.language.other',
[DefaultLanguage.LOCAL_SOURCE]: 'extension.language.other',
[DefaultLanguage.PINNED]: 'global.label.pinned',
};

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

@@ -49,7 +49,7 @@ export const isExtensionState = (value: string): boolean =>
export const isExtensionStateOrLanguage = (languageCode: string): boolean =>
isExtensionState(languageCode) ||
[DefaultLanguage.ALL, DefaultLanguage.OTHER, DefaultLanguage.LOCAL_SOURCE].includes(
[DefaultLanguage.ALL, DefaultLanguage.OTHER, DefaultLanguage.LOCAL_SOURCE, DefaultLanguage.PINNED].includes(
languageCode as DefaultLanguage,
);

2
src/modules/metadata/Metadata.constants.ts
View File

@@ -93,6 +93,7 @@ const APP_METADATA_OBJECT: Record<AppMetadataKeys, undefined> = {
themeMode: undefined,
shouldUsePureBlackMode: undefined,
mangaGridItemWidth: undefined,
isPinned: undefined,
};
export const VALID_APP_METADATA_KEYS = Object.keys(APP_METADATA_OBJECT);
@@ -158,6 +159,7 @@ export const GLOBAL_METADATA_KEYS: AppMetadataKeys[] = [
// sources
'savedSearches',
'isPinned',
// themes
'customThemes',

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

@@ -10,6 +10,7 @@ import {
ExtensionType,
GetSourceBrowseQuery,
GetSourceSettingsQuery,
SourceMetaFieldsFragment,
SourcePreferenceChangeInput,
SourceType,
} from '@/lib/graphql/generated/graphql.ts';
@@ -25,6 +26,7 @@ export type SavedSourceSearch = { query?: string; filters?: IPos[] };
export interface ISourceMetadata {
savedSearches?: Record<string, SavedSourceSearch>;
isPinned: boolean;
}
export type SourceFilters = GetSourceBrowseQuery['source']['filters'][number];
@@ -65,3 +67,4 @@ export type SourceLanguageInfo = Pick<SourceType, 'lang'>;
export type SourceDisplayNameInfo = Pick<SourceType, 'displayName'>;
export type SourceNsfwInfo = Pick<SourceType, 'isNsfw'>;
export type SourceRepoInfo = { extension: Pick<ExtensionType, 'repo'> };
export type SourceMetaInfo = { meta: SourceMetaFieldsFragment[] };

25
src/modules/source/components/SourceCard.tsx
View File

@@ -14,6 +14,9 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import Stack from '@mui/material/Stack';
import PushPinIcon from '@mui/icons-material/PushPin';
import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
import IconButton from '@mui/material/IconButton';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { SourceContentType } from '@/modules/source/screens/SourceMangas.tsx';
import { GetSourcesListQuery } from '@/lib/graphql/generated/graphql.ts';
@@ -23,6 +26,10 @@ import { MUIUtil } from '@/lib/mui/MUI.util.ts';
import { Sources } from '@/modules/source/services/Sources.ts';
import { ListCardAvatar } from '@/modules/core/components/lists/cards/ListCardAvatar.tsx';
import { ListCardContent } from '@/modules/core/components/lists/cards/ListCardContent.tsx';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { createUpdateSourceMetadata, useGetSourceMetadata } from '@/modules/source/services/SourceMetadata.ts';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
interface IProps {
source: GetSourcesListQuery['sources']['nodes'][number];
@@ -43,8 +50,14 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
extension: { repo },
} = source;
const { isPinned } = useGetSourceMetadata(source);
const sourceName = Sources.isLocalSource(source) ? t('source.local_source.title') : name;
const updateSetting = createUpdateSourceMetadata(source, (e) =>
makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
);
return (
<Card
sx={{
@@ -91,6 +104,18 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
{t('global.button.latest')}
</Button>
)}
<CustomTooltip title={t(isPinned ? 'source.pin.remove' : 'source.pin.add')}>
<IconButton
{...MUIUtil.preventRippleProp()}
onClick={(e) => {
e.preventDefault();
updateSetting('isPinned', !isPinned);
}}
color={isPinned ? 'primary' : 'inherit'}
>
{isPinned ? <PushPinIcon /> : <PushPinOutlinedIcon />}
</IconButton>
</CustomTooltip>
</ListCardContent>
</CardActionArea>
</Card>

1
src/modules/source/services/SourceMetadata.ts
View File

@@ -22,6 +22,7 @@ import {
const DEFAULT_SOURCE_METADATA: ISourceMetadata = {
savedSearches: undefined,
isPinned: false,
};
const convertAppMetadataToGqlMetadata = (

29
src/modules/source/services/Sources.ts
View File

@@ -11,6 +11,7 @@ import {
SourceIdInfo,
SourceLanguageInfo,
SourceNsfwInfo,
SourceMetaInfo,
SourceRepoInfo,
} from '@/modules/source/Source.types.ts';
import {
@@ -20,6 +21,7 @@ import {
toComparableLanguages,
toUniqueLanguageCodes,
} from '@/modules/core/utils/Languages.ts';
import { getSourceMetadata } from '@/modules/source/services/SourceMetadata.ts';
export class Sources {
static readonly LOCAL_SOURCE_ID = '0';
@@ -40,13 +42,30 @@ export class Sources {
return [...new Set(sources.map(Sources.getLanguage))];
}
static groupByLanguage<Source extends SourceIdInfo & SourceLanguageInfo & SourceDisplayNameInfo>(
static groupByLanguage<Source extends SourceIdInfo & SourceLanguageInfo & SourceDisplayNameInfo & SourceMetaInfo>(
sources: Source[],
): Record<string, Source[]> {
const sourcesByLanguage = Object.groupBy(sources, Sources.getLanguage);
const sourcesBySortedLanguage = Object.entries(sourcesByLanguage).toSorted(([a], [b]) =>
languageSpecialSortComparator(a, b),
);
const sourcesByLanguage = Object.groupBy(sources, (source) => {
if (getSourceMetadata(source).isPinned) {
return DefaultLanguage.PINNED;
}
return Sources.getLanguage(source);
});
const sourcesBySortedLanguage = Object.entries(sourcesByLanguage).toSorted(([a], [b]) => {
const isAPinned = a === DefaultLanguage.PINNED;
const isBPinned = b === DefaultLanguage.PINNED;
if (isAPinned) {
return -1;
}
if (isBPinned) {
return 1;
}
return languageSpecialSortComparator(a, b);
});
const sortedSourcesBySortedLanguage = sourcesBySortedLanguage.map(([language, sourcesOfLanguage]) => [
language,
(sourcesOfLanguage ?? []).toSorted((a, b) => a.displayName.localeCompare(b.displayName)),