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

Save library options per category

Browse Source
This commit is contained in:
schroda
2024-09-17 03:40:55 +02:00
parent df129f723a
commit a1131bf85b
17 changed files with 244 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/context/LibraryOptionsContext.tsx
View File

@@ -8,6 +8,7 @@
import React, { useContext } from 'react';
import { LibraryOptions } from '@/typings';
import { getDefaultCategoryMetadata } from '@/lib/metadata/categoryMetadata.ts';
type ContextType = {
options: LibraryOptions;
@@ -20,31 +21,8 @@ export enum GridLayout {
List = 2,
}
export const DefaultLibraryOptions: LibraryOptions = {
// display options
showContinueReadingButton: false,
showDownloadBadge: false,
showUnreadBadge: false,
gridLayout: GridLayout.Compact,
sourceGridLayout: GridLayout.Compact,
showTabSize: false,
// sort options
sortDesc: undefined,
sortBy: undefined,
// filter options
hasDownloadedChapters: undefined,
hasBookmarkedChapters: undefined,
hasUnreadChapters: undefined,
hasDuplicateChapters: undefined,
hasTrackerBinding: {},
hasStatus: {} as LibraryOptions['hasStatus'],
};
export const LibraryOptionsContext = React.createContext<ContextType>({
options: DefaultLibraryOptions,
options: getDefaultCategoryMetadata(),
setOptions: () => {},
});

3
src/components/library/LibraryMangaGrid.tsx
View File

@@ -29,11 +29,10 @@ export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({
const [query] = useQueryParam('query', StringParam);
const { options } = useLibraryOptionsContext();
const { unread, downloaded } = options;
useEffect(() => {
window.scrollTo(0, 0);
}, [query, unread, downloaded]);
}, [query, options.hasUnreadChapters, options.hasDownloadedChapters]);
useLayoutEffect(() => {
document.body.style.overflowY = options.gridLayout === GridLayout.List ? 'auto' : 'scroll';

95
src/components/library/LibraryOptionsPanel.tsx
View File

@@ -8,20 +8,27 @@
import FormLabel from '@mui/material/FormLabel';
import RadioGroup from '@mui/material/RadioGroup';
import React from 'react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { LibraryOptions, LibrarySortMode, TranslationKey } from '@/typings';
import { LibrarySortMode, TranslationKey } from '@/typings';
import { CheckboxInput } from '@/components/atoms/CheckboxInput';
import { RadioInput } from '@/components/atoms/RadioInput';
import { SortRadioInput } from '@/components/atoms/SortRadioInput';
import { ThreeStateCheckboxInput } from '@/components/atoms/ThreeStateCheckboxInput';
import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import { GridLayout } from '@/components/context/LibraryOptionsContext';
import { OptionsTabs } from '@/components/molecules/OptionsTabs';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { Trackers } from '@/lib/data/Trackers.ts';
import { GetTrackersSettingsQuery, MangaStatus } from '@/lib/graphql/generated/graphql.ts';
import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/queries/TrackerQuery.ts';
import { statusToTranslationKey } from '@/lib/data/Mangas.ts';
import { CategoryMetadataInfo } from '@/lib/data/Categories.ts';
import { createUpdateCategoryMetadata, getCategoryMetadata } from '@/lib/metadata/categoryMetadata.ts';
import { makeToast } from '@/components/util/Toast.tsx';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
const TITLES: { [key in 'filter' | 'sort' | 'display']: TranslationKey } = {
filter: 'global.label.filter',
@@ -39,21 +46,31 @@ const SORT_OPTIONS: [LibrarySortMode, TranslationKey][] = [
['latestUploadedChapter', 'library.option.sort.label.by_latest_uploaded_chapter'],
];
interface IProps {
export const LibraryOptionsPanel = ({
category,
open,
onClose,
}: {
category: CategoryMetadataInfo;
open: boolean;
onClose: () => void;
}
export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
}) => {
const { t } = useTranslation();
const { options, setOptions } = useLibraryOptionsContext();
const trackerList = requestManager.useGetTrackerList<GetTrackersSettingsQuery>(GET_TRACKERS_SETTINGS);
const loggedInTrackers = Trackers.getLoggedIn(trackerList.data?.trackers.nodes ?? []);
const handleFilterChange = <T extends keyof LibraryOptions>(key: T, value: LibraryOptions[T]) => {
setOptions((v) => ({ ...v, [key]: value }));
};
const categoryLibraryOptions = useMemo(() => getCategoryMetadata(category), [category]);
const updateCategoryLibraryOptions = createUpdateCategoryMetadata(category, () =>
makeToast(t('global.error.label.failed_to_save_changes', 'error')),
);
const {
settings: { showTabSize },
} = useMetadataServerSettings();
const setSettingValue = createUpdateMetadataServerSettings<'showTabSize'>(() =>
makeToast(t('search.error.label.failed_to_save_settings'), 'warning'),
);
return (
<OptionsTabs<'filter' | 'sort' | 'display'>
@@ -67,32 +84,33 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
<>
<ThreeStateCheckboxInput
label={t('global.filter.label.unread')}
checked={options.hasUnreadChapters}
onChange={(c) => handleFilterChange('hasUnreadChapters', c)}
checked={categoryLibraryOptions.hasUnreadChapters}
onChange={(c) => updateCategoryLibraryOptions('hasUnreadChapters', c)}
/>
<ThreeStateCheckboxInput
label={t('global.filter.label.downloaded')}
checked={options.hasDownloadedChapters}
onChange={(c) => handleFilterChange('hasDownloadedChapters', c)}
checked={categoryLibraryOptions.hasDownloadedChapters}
onChange={(c) => updateCategoryLibraryOptions('hasDownloadedChapters', c)}
/>
<ThreeStateCheckboxInput
label={t('global.filter.label.bookmarked')}
checked={options.hasBookmarkedChapters}
onChange={(c) => handleFilterChange('hasBookmarkedChapters', c)}
checked={categoryLibraryOptions.hasBookmarkedChapters}
onChange={(c) => updateCategoryLibraryOptions('hasBookmarkedChapters', c)}
/>
<ThreeStateCheckboxInput
label={t('global.filter.label.duplicate_chapters')}
checked={options.hasDuplicateChapters}
onChange={(c) => handleFilterChange('hasDuplicateChapters', c)}
checked={categoryLibraryOptions.hasDuplicateChapters}
onChange={(c) => updateCategoryLibraryOptions('hasDuplicateChapters', c)}
/>
<FormLabel sx={{ mt: 2 }}>{t('manga.label.status')}</FormLabel>
{Object.values(MangaStatus).map((status) => (
<ThreeStateCheckboxInput
key={status}
label={t(statusToTranslationKey[status])}
checked={options.hasStatus[status]}
checked={categoryLibraryOptions.hasStatus[status]}
onChange={(checked) =>
handleFilterChange('hasStatus', {
...options.hasStatus,
updateCategoryLibraryOptions('hasStatus', {
...categoryLibraryOptions.hasStatus,
[status]: checked,
})
}
@@ -103,10 +121,10 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
<ThreeStateCheckboxInput
key={tracker.id}
label={tracker.name}
checked={options.hasTrackerBinding[tracker.id]}
checked={categoryLibraryOptions.hasTrackerBinding[tracker.id]}
onChange={(checked) =>
handleFilterChange('hasTrackerBinding', {
...options.hasTrackerBinding,
updateCategoryLibraryOptions('hasTrackerBinding', {
...categoryLibraryOptions.hasTrackerBinding,
[tracker.id]: checked,
})
}
@@ -120,24 +138,24 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
<SortRadioInput
key={mode}
label={t(label)}
checked={options.sortBy === mode}
sortDescending={options.sortDesc}
checked={categoryLibraryOptions.sortBy === mode}
sortDescending={categoryLibraryOptions.sortDesc}
onClick={() =>
mode !== options.sortBy
? handleFilterChange('sortBy', mode)
: handleFilterChange('sortDesc', !options.sortDesc)
mode !== categoryLibraryOptions.sortBy
? updateCategoryLibraryOptions('sortBy', mode)
: updateCategoryLibraryOptions('sortDesc', !categoryLibraryOptions.sortDesc)
}
/>
));
}
if (key === 'display') {
const { gridLayout, showContinueReadingButton, showDownloadBadge, showUnreadBadge, showTabSize } =
options;
const { gridLayout, showContinueReadingButton, showDownloadBadge, showUnreadBadge } =
categoryLibraryOptions;
return (
<>
<FormLabel>{t('global.grid_layout.title')}</FormLabel>
<RadioGroup
onChange={(e) => handleFilterChange('gridLayout', Number(e.target.value))}
onChange={(e) => updateCategoryLibraryOptions('gridLayout', Number(e.target.value))}
value={gridLayout}
>
<RadioInput
@@ -161,19 +179,19 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
<CheckboxInput
label={t('library.option.display.badge.label.unread_badges')}
checked={showUnreadBadge}
onChange={() => handleFilterChange('showUnreadBadge', !showUnreadBadge)}
onChange={() => updateCategoryLibraryOptions('showUnreadBadge', !showUnreadBadge)}
/>
<CheckboxInput
label={t('library.option.display.badge.label.download_badges')}
checked={showDownloadBadge}
onChange={() => handleFilterChange('showDownloadBadge', !showDownloadBadge)}
onChange={() => updateCategoryLibraryOptions('showDownloadBadge', !showDownloadBadge)}
/>
<FormLabel sx={{ mt: 2 }}>{t('library.option.display.tab.title')}</FormLabel>
<CheckboxInput
label={t('library.option.display.tab.label.show_number_of_items')}
checked={showTabSize}
onChange={() => handleFilterChange('showTabSize', !showTabSize)}
onChange={() => setSettingValue('showTabSize', !showTabSize)}
/>
<FormLabel sx={{ mt: 2 }}>{t('global.label.other')}</FormLabel>
@@ -181,7 +199,10 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
label={t('library.option.display.other.label.show_continue_reading_button')}
checked={showContinueReadingButton}
onChange={() =>
handleFilterChange('showContinueReadingButton', !showContinueReadingButton)
updateCategoryLibraryOptions(
'showContinueReadingButton',
!showContinueReadingButton,
)
}
/>
</>

7
src/components/library/LibraryOptionsProvider.tsx
View File

@@ -9,17 +9,18 @@
import React, { useMemo } from 'react';
import { LibraryOptions } from '@/typings';
import { useLocalStorage } from '@/util/useStorage.tsx';
import { LibraryOptionsContext, DefaultLibraryOptions } from '@/components/context/LibraryOptionsContext';
import { LibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import { getDefaultCategoryMetadata } from '@/lib/metadata/categoryMetadata.ts';
interface IProps {
children: React.ReactNode;
}
export const LibraryOptionsContextProvider: React.FC<IProps> = ({ children }) => {
const [options, setOptions] = useLocalStorage<LibraryOptions>('libraryOptions', DefaultLibraryOptions);
const [options, setOptions] = useLocalStorage<LibraryOptions>('libraryOptions', getDefaultCategoryMetadata());
const value = useMemo(
() => ({ options: { ...DefaultLibraryOptions, ...options }, setOptions }),
() => ({ options: { ...getDefaultCategoryMetadata(), ...options }, setOptions }),
[options, setOptions],
);

10
src/components/library/LibraryToolbarMenu.tsx
View File

@@ -9,12 +9,16 @@
import FilterList from '@mui/icons-material/FilterList';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import React, { useState } from 'react';
import { ComponentProps, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { LibraryOptionsPanel } from '@/components/library/LibraryOptionsPanel';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';
export const LibraryToolbarMenu: React.FC = () => {
export const LibraryToolbarMenu = ({
category,
}: {
category: ComponentProps<typeof LibraryOptionsPanel>['category'];
}) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
@@ -31,7 +35,7 @@ export const LibraryToolbarMenu: React.FC = () => {
<FilterList />
</IconButton>
</Tooltip>
<LibraryOptionsPanel open={open} onClose={() => setOpen(false)} />
<LibraryOptionsPanel category={category} open={open} onClose={() => setOpen(false)} />
</>
);
};

6
src/components/library/useGetVisibleLibraryMangas.ts
View File

@@ -9,11 +9,12 @@
import { StringParam, useQueryParam } from 'use-query-params';
import { useMemo } from 'react';
import { LibraryOptions, LibrarySortMode, NullAndUndefined } from '@/typings.ts';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { ChapterType, MangaType, SourceType, TrackRecordType } from '@/lib/graphql/generated/graphql.ts';
import { MangaChapterCountInfo, MangaIdInfo } from '@/lib/data/Mangas.ts';
import { enhancedCleanup } from '@/lib/data/Strings.ts';
import { CategoryMetadataInfo } from '@/lib/data/Categories.ts';
import { getCategoryMetadata } from '@/lib/metadata/categoryMetadata.ts';
const triStateFilter = (
triState: NullAndUndefined<boolean>,
@@ -198,12 +199,13 @@ const sortManga = <Manga extends TMangaSort>(
export const useGetVisibleLibraryMangas = <Manga extends MangaIdInfo & TMangasFilter & TMangaSort>(
mangas: Manga[],
category?: CategoryMetadataInfo,
): {
visibleMangas: Manga[];
showFilteredOutMessage: boolean;
} => {
const [query] = useQueryParam('query', StringParam);
const { options } = useLibraryOptionsContext();
const options = getCategoryMetadata(category);
const {
hasUnreadChapters,
hasDownloadedChapters,

2
src/components/manga/MangaBadges.tsx
View File

@@ -10,9 +10,9 @@ import { styled } from '@mui/material/styles';
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';
import { MangaCardMode } from '@/components/manga/MangaCard.types.tsx';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';
const BadgeContainer = styled('div')(({ theme }) => ({
display: 'flex',

14
src/components/source/SourceGridLayout.tsx
View File

@@ -6,18 +6,12 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import { GridLayout } from '@/components/context/LibraryOptionsContext';
import { GridLayouts } from '@/components/source/GridLayouts.tsx';
import { useLocalStorage } from '@/util/useStorage.tsx';
export function SourceGridLayout() {
const {
options: { SourcegridLayout },
setOptions,
} = useLibraryOptionsContext();
const [sourceGridLayout, setSourceGridLayout] = useLocalStorage('source-grid-layout', GridLayout.Compact);
function setGridContextOptions(gridLayout: GridLayout) {
setOptions((prev: any) => ({ ...prev, SourcegridLayout: gridLayout }));
}
return <GridLayouts gridLayout={SourcegridLayout} onChange={setGridContextOptions} />;
return <GridLayouts gridLayout={sourceGridLayout} onChange={setSourceGridLayout} />;
}

3
src/lib/data/Categories.ts
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { CategoryType } from '@/lib/graphql/generated/graphql.ts';
import { CategoryMetaType, CategoryType } from '@/lib/graphql/generated/graphql.ts';
export const DEFAULT_CATEGORY_ID = 0;
@@ -15,6 +15,7 @@ export type CategoryNameInfo = Pick<CategoryType, 'name'>;
export type CategoryDefaultInfo = Pick<CategoryType, 'default'>;
export type CategoryUpdateInclusionInfo = Pick<CategoryType, 'includeInUpdate'>;
export type CategoryDownloadInclusionInfo = Pick<CategoryType, 'includeInDownload'>;
export type CategoryMetadataInfo = CategoryIdInfo & { meta: Pick<CategoryMetaType, 'key' | 'value'>[] };
export class Categories {
static getIds(categories: CategoryIdInfo[]): number[] {

4
src/lib/graphql/fragments/CategoryFragments.ts
View File

@@ -24,6 +24,10 @@ export const CATEGORY_LIBRARY_FIELDS = gql`
fragment CATEGORY_LIBRARY_FIELDS on CategoryType {
...CATEGORY_BASE_FIELDS
meta {
key
value
}
mangas {
totalCount
}

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

@@ -2713,7 +2713,7 @@ export type WebUiUpdateStatus = {
export type CategoryBaseFieldsFragment = { __typename?: 'CategoryType', id: number, name: string, default: boolean, order: number };
export type CategoryLibraryFieldsFragment = { __typename?: 'CategoryType', id: number, name: string, default: boolean, order: number, mangas: { __typename?: 'MangaNodeList', totalCount: number } };
export type CategoryLibraryFieldsFragment = { __typename?: 'CategoryType', id: number, name: string, default: boolean, order: number, meta: Array<{ __typename?: 'CategoryMetaType', key: string, value: string }>, mangas: { __typename?: 'MangaNodeList', totalCount: number } };
export type CategorySettingFieldsFragment = { __typename?: 'CategoryType', includeInUpdate: IncludeOrExclude, includeInDownload: IncludeOrExclude, id: number, name: string, default: boolean, order: number };
@@ -3253,7 +3253,7 @@ export type GetCategoriesLibraryQueryVariables = Exact<{
}>;
export type GetCategoriesLibraryQuery = { __typename?: 'Query', categories: { __typename?: 'CategoryNodeList', totalCount: number, nodes: Array<{ __typename?: 'CategoryType', id: number, name: string, default: boolean, order: number, mangas: { __typename?: 'MangaNodeList', totalCount: number } }>, pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor?: string | null } } };
export type GetCategoriesLibraryQuery = { __typename?: 'Query', categories: { __typename?: 'CategoryNodeList', totalCount: number, nodes: Array<{ __typename?: 'CategoryType', id: number, name: string, default: boolean, order: number, meta: Array<{ __typename?: 'CategoryMetaType', key: string, value: string }>, mangas: { __typename?: 'MangaNodeList', totalCount: number } }>, pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor?: string | null } } };
export type GetCategoriesSettingsQueryVariables = Exact<{
after?: InputMaybe<Scalars['Cursor']['input']>;

96
src/lib/metadata/categoryMetadata.ts Normal file
View File

@@ -0,0 +1,96 @@
/*
* 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 {
AllowedMetadataValueTypes,
AppMetadataKeys,
CategoryMetadataKeys,
GqlMetaHolder,
ICategoryMetadata,
LibraryOptions,
Metadata,
} from '@/typings.ts';
import { jsonSaveParse } from '@/util/HelperFunctions.ts';
import { convertFromGqlMeta, getMetadataFrom, requestUpdateCategoryMetadata } from '@/lib/metadata/metadata.ts';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
import { CategoryIdInfo } from '@/lib/data/Categories.ts';
import { GridLayout } from '@/components/context/LibraryOptionsContext.tsx';
export const getDefaultCategoryMetadata = (): ICategoryMetadata => ({
// display options
showContinueReadingButton: false,
showDownloadBadge: false,
showUnreadBadge: false,
gridLayout: GridLayout.Compact,
// sort options
sortDesc: undefined,
sortBy: undefined,
// filter options
hasDownloadedChapters: undefined,
hasBookmarkedChapters: undefined,
hasUnreadChapters: undefined,
hasDuplicateChapters: undefined,
hasTrackerBinding: {},
hasStatus: {} as LibraryOptions['hasStatus'],
});
const convertAppMetadataToGqlMetadata = (
metadata: Partial<ICategoryMetadata>,
): Metadata<string, AllowedMetadataValueTypes> => ({
...metadata,
hasTrackerBinding: metadata.hasTrackerBinding ? JSON.stringify(metadata.hasTrackerBinding) : undefined,
hasStatus: metadata.hasStatus ? JSON.stringify(metadata.hasStatus) : undefined,
});
const convertGqlMetadataToAppMetadata = (
metadata: Partial<Metadata<AppMetadataKeys, AllowedMetadataValueTypes>>,
): ICategoryMetadata => ({
...(metadata as unknown as ICategoryMetadata),
hasTrackerBinding:
jsonSaveParse<ICategoryMetadata['hasTrackerBinding']>(metadata.hasTrackerBinding as string) ??
(undefined as any),
hasStatus: jsonSaveParse<ICategoryMetadata['hasStatus']>(metadata.hasStatus as string) ?? (undefined as any),
});
const getCategoryMetadataWithDefaultValueFallback = (
meta?: Metadata,
defaultMetadata: ICategoryMetadata = getDefaultCategoryMetadata(),
applyMetadataMigration: boolean = true,
): ICategoryMetadata =>
convertGqlMetadataToAppMetadata(
getMetadataFrom({ meta }, convertAppMetadataToGqlMetadata(defaultMetadata), applyMetadataMigration),
);
export const getCategoryMetadata = (
{ meta }: GqlMetaHolder = {},
defaultMetadata?: ICategoryMetadata,
applyMetadataMigration?: boolean,
): ICategoryMetadata =>
getCategoryMetadataWithDefaultValueFallback(convertFromGqlMeta(meta), defaultMetadata, applyMetadataMigration);
export const updateCategoryMetadata = async <
MetadataKeys extends CategoryMetadataKeys = CategoryMetadataKeys,
MetadataKey extends MetadataKeys = MetadataKeys,
>(
category: CategoryIdInfo & GqlMetaHolder,
metadataKey: MetadataKey,
value: ICategoryMetadata[MetadataKey],
): Promise<void[]> =>
requestUpdateCategoryMetadata(category, [
[metadataKey, convertAppMetadataToGqlMetadata({ [metadataKey]: value })[metadataKey]],
]);
export const createUpdateCategoryMetadata =
<Settings extends CategoryMetadataKeys>(
category: CategoryIdInfo & GqlMetaHolder,
handleError: (error: any) => void = defaultPromiseErrorHandler('createUpdateCategoryMetadata'),
): ((...args: OmitFirst<Parameters<typeof updateCategoryMetadata<Settings>>>) => Promise<void | void[]>) =>
(metadataKey, value) =>
updateCategoryMetadata(category, metadataKey, value).catch(handleError);

22
src/lib/metadata/metadata.ts
View File

@@ -34,6 +34,24 @@ const GLOBAL_METADATA_KEYS: AppMetadataKeys[] = [
'showAddToLibraryCategorySelectDialog',
'ignoreFilters',
'removeMangaFromCategories',
'showTabSize',
// library category options
// filter
'hasDownloadedChapters',
'hasBookmarkedChapters',
'hasUnreadChapters',
'hasDuplicateChapters',
'hasTrackerBinding',
'hasStatus',
// sort
'sortBy',
'sortDesc',
// display
'showDownloadBadge',
'showUnreadBadge',
'showTabSize',
'showContinueReadingButton',
// client
'devices',
@@ -162,6 +180,10 @@ const convertValueFromMetadata = <T extends AllowedMetadataValueTypes = AllowedM
return undefined as T;
}
if (value === 'null') {
return null as T;
}
return value as T;
};

1
src/lib/metadata/metadataServerSettings.ts
View File

@@ -31,6 +31,7 @@ export const getDefaultSettings = (): MetadataServerSettings => ({
showAddToLibraryCategorySelectDialog: true,
ignoreFilters: false,
removeMangaFromCategories: false,
showTabSize: false,
// client
devices: [DEFAULT_DEVICE],

29
src/screens/Library.tsx
View File

@@ -9,7 +9,7 @@
import Chip, { ChipProps } from '@mui/material/Chip';
import Tab from '@mui/material/Tab';
import { styled } from '@mui/material/styles';
import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
import { useQueryParam, NumberParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -20,7 +20,6 @@ import { LibraryToolbarMenu } from '@/components/library/LibraryToolbarMenu';
import { LibraryMangaGrid } from '@/components/library/LibraryMangaGrid';
import { AppbarSearch } from '@/components/util/AppbarSearch';
import { UpdateChecker } from '@/components/library/UpdateChecker';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { useSelectableCollection } from '@/components/collection/useSelectableCollection.ts';
import { SelectableCollectionSelectMode } from '@/components/collection/SelectableCollectionSelectMode.tsx';
@@ -39,6 +38,9 @@ import {
import { GET_CATEGORIES_LIBRARY } from '@/lib/graphql/queries/CategoryQuery.ts';
import { Mangas } from '@/lib/data/Mangas.ts';
import { MANGA_CHAPTER_STAT_FIELDS } from '@/lib/graphql/fragments/MangaFragments.ts';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { getCategoryMetadata } from '@/lib/metadata/categoryMetadata.ts';
const TitleWithSizeTag = styled('span')({
display: 'flex',
@@ -52,7 +54,10 @@ const TitleSizeTag = ({ sx, ...props }: ChipProps) => (
export function Library() {
const { t } = useTranslation();
const { options } = useLibraryOptionsContext();
const {
settings: { showTabSize },
} = useMetadataServerSettings();
const {
data: categoriesResponse,
error: tabsError,
@@ -75,7 +80,13 @@ export function Library() {
const [tabSearchParam, setTabSearchParam] = useQueryParam('tab', NumberParam);
const activeTab = tabs.find((tab) => tab.order === tabSearchParam) ?? tabs[0];
const { setOptions } = useLibraryOptionsContext();
const activeTab: (typeof tabs)[number] | undefined = tabs.find((tab) => tab.order === tabSearchParam) ?? tabs[0];
useLayoutEffect(() => {
setOptions(getCategoryMetadata(activeTab));
}, [activeTab]);
const {
data: categoryMangaResponse,
error: mangaError,
@@ -83,7 +94,7 @@ export function Library() {
refetch: refetchCategoryMangas,
} = requestManager.useGetCategoryMangas(activeTab?.id, { skip: !activeTab, notifyOnNetworkStatusChange: true });
const categoryMangas = categoryMangaResponse?.mangas.nodes ?? [];
const { visibleMangas: mangas, showFilteredOutMessage } = useGetVisibleLibraryMangas(categoryMangas);
const { visibleMangas: mangas, showFilteredOutMessage } = useGetVisibleLibraryMangas(categoryMangas, activeTab);
const retryFetchCategoryMangas = useCallback(
() => refetchCategoryMangas().catch(defaultPromiseErrorHandler('Library::refetchCategoryMangas')),
@@ -152,7 +163,7 @@ export function Library() {
const navBarTitle = (
<TitleWithSizeTag>
{title}
{options.showTabSize && <TitleSizeTag sx={{ color: 'inherit' }} label={librarySize} />}
{showTabSize && <TitleSizeTag sx={{ color: 'inherit' }} label={librarySize} />}
</TitleWithSizeTag>
);
setTitle(navBarTitle, title);
@@ -161,7 +172,7 @@ export function Library() {
{!isSelectModeActive && (
<>
<AppbarSearch />
<LibraryToolbarMenu />
<LibraryToolbarMenu category={activeTab} />
<UpdateChecker categoryId={activeTab?.id} />
</>
)}
@@ -192,13 +203,13 @@ export function Library() {
t,
librarySize,
areCategoriesLoading,
options,
isSelectModeActive,
areNoItemsSelected,
areAllItemsSelected,
selectedItemIds.length,
mangas.length,
activeTab,
showTabSize,
]);
const handleTabChange = (newTab: number) => {
@@ -252,7 +263,7 @@ export function Library() {
label={
<TitleWithSizeTag>
{tab.name}
{options.showTabSize ? <TitleSizeTag label={tab.mangas.totalCount} /> : null}
{showTabSize ? <TitleSizeTag label={tab.mangas.totalCount} /> : null}
</TitleWithSizeTag>
}
value={tab.order}

8
src/screens/SourceMangas.tsx
View File

@@ -26,7 +26,7 @@ import {
AbortableApolloUseMutationPaginatedResponse,
SPECIAL_ED_SOURCES,
} from '@/lib/requests/RequestManager.ts';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import { GridLayout } from '@/components/context/LibraryOptionsContext';
import { SourceGridLayout } from '@/components/source/SourceGridLayout';
import { AppbarSearch } from '@/components/util/AppbarSearch';
import { SourceOptions } from '@/components/source/SourceOptions';
@@ -39,7 +39,7 @@ import {
} from '@/lib/graphql/generated/graphql.ts';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useSessionStorage } from '@/util/useStorage.tsx';
import { useLocalStorage, useSessionStorage } from '@/util/useStorage.tsx';
import { AppStorage } from '@/util/AppStorage.ts';
import { getGridSnapshotKey } from '@/components/MangaGrid.tsx';
import { createUpdateSourceMetadata, getSourceMetadata } from '@/lib/metadata/sourceMetadata.ts';
@@ -217,7 +217,7 @@ export function SourceMangas() {
settings: { hideLibraryEntries },
} = useMetadataServerSettings();
const { options } = useLibraryOptionsContext();
const [sourceGridLayout] = useLocalStorage('source-grid-layout', GridLayout.Compact);
const [query] = useQueryParam('query', StringParam);
const [currentFiltersToApply, setCurrentFiltersToApply] = useSessionStorage<IPos[] | undefined>(
`source-mangas-${sourceId}-filters`,
@@ -462,7 +462,7 @@ export function SourceMangas() {
message={message}
messageExtra={messageExtra}
isLoading={isLoading}
gridLayout={options.SourcegridLayout}
gridLayout={sourceGridLayout}
mode="source"
inLibraryIndicator
/>

16
src/typings.ts
View File

@@ -46,6 +46,8 @@ export interface ISourceMetadata {
savedSearches?: Record<string, SavedSourceSearch>;
}
export interface ICategoryMetadata extends LibraryOptions {}
export type SourceFilters = GetSourceBrowseQuery['source']['filters'][number];
export interface IMetadataMigration {
@@ -72,7 +74,7 @@ export type MetadataHolder<Keys extends string = string, Values = string> = {
meta?: Metadata<Keys, Values>;
};
export type AllowedMetadataValueTypes = string | boolean | number | undefined;
export type AllowedMetadataValueTypes = string | boolean | number | undefined | null;
export type MetadataServerSettingKeys = keyof MetadataServerSettings;
@@ -82,7 +84,14 @@ export type SearchMetadataKeys = keyof ISearchSettings;
export type SourceMetadataKeys = keyof ISourceMetadata;
export type AppMetadataKeys = MetadataServerSettingKeys | MangaMetadataKeys | SearchMetadataKeys | SourceMetadataKeys;
export type CategoryMetadataKeys = keyof ICategoryMetadata;
export type AppMetadataKeys =
| MetadataServerSettingKeys
| MangaMetadataKeys
| SearchMetadataKeys
| SourceMetadataKeys
| CategoryMetadataKeys;
export type MetadataKeyValuePair = [AppMetadataKeys, AllowedMetadataValueTypes];
@@ -131,6 +140,7 @@ export type MetadataLibrarySettings = {
showAddToLibraryCategorySelectDialog: boolean;
ignoreFilters: boolean;
removeMangaFromCategories: boolean;
showTabSize: boolean;
};
export type MetadataClientSettings = {
@@ -272,8 +282,6 @@ export interface LibraryOptions {
showDownloadBadge: boolean;
showUnreadBadge: boolean;
gridLayout: GridLayout;
sourceGridLayout: GridLayout;
showTabSize: boolean;
// sort options
sortBy: NullAndUndefined<LibrarySortMode>;