Save library options per category

src/components/context/LibraryOptionsContext.tsx

@@ -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: () => {},
 });
 

src/components/library/LibraryMangaGrid.tsx

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

src/components/library/LibraryOptionsPanel.tsx

@@ -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]) => {
+    const categoryLibraryOptions = useMemo(() => getCategoryMetadata(category), [category]);
-        setOptions((v) => ({ ...v, [key]: value }));
+    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}
+                                checked={categoryLibraryOptions.hasUnreadChapters}
-                                onChange={(c) => handleFilterChange('hasUnreadChapters', c)}
+                                onChange={(c) => updateCategoryLibraryOptions('hasUnreadChapters', c)}
                             />
                             <ThreeStateCheckboxInput
                                 label={t('global.filter.label.downloaded')}
-                                checked={options.hasDownloadedChapters}
+                                checked={categoryLibraryOptions.hasDownloadedChapters}
-                                onChange={(c) => handleFilterChange('hasDownloadedChapters', c)}
+                                onChange={(c) => updateCategoryLibraryOptions('hasDownloadedChapters', c)}
                             />
                             <ThreeStateCheckboxInput
                                 label={t('global.filter.label.bookmarked')}
-                                checked={options.hasBookmarkedChapters}
+                                checked={categoryLibraryOptions.hasBookmarkedChapters}
-                                onChange={(c) => handleFilterChange('hasBookmarkedChapters', c)}
+                                onChange={(c) => updateCategoryLibraryOptions('hasBookmarkedChapters', c)}
                             />
                             <ThreeStateCheckboxInput
                                 label={t('global.filter.label.duplicate_chapters')}
-                                checked={options.hasDuplicateChapters}
+                                checked={categoryLibraryOptions.hasDuplicateChapters}
-                                onChange={(c) => handleFilterChange('hasDuplicateChapters', c)}
+                                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', {
+                                        updateCategoryLibraryOptions('hasStatus', {
-                                            ...options.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', {
+                                        updateCategoryLibraryOptions('hasTrackerBinding', {
-                                            ...options.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}
+                            checked={categoryLibraryOptions.sortBy === mode}
-                            sortDescending={options.sortDesc}
+                            sortDescending={categoryLibraryOptions.sortDesc}
                             onClick={() =>
-                                mode !== options.sortBy
+                                mode !== categoryLibraryOptions.sortBy
-                                    ? handleFilterChange('sortBy', mode)
+                                    ? updateCategoryLibraryOptions('sortBy', mode)
-                                    : handleFilterChange('sortDesc', !options.sortDesc)
+                                    : updateCategoryLibraryOptions('sortDesc', !categoryLibraryOptions.sortDesc)
                             }
                         />
                     ));
                 }
                 if (key === 'display') {
-                    const { gridLayout, showContinueReadingButton, showDownloadBadge, showUnreadBadge, showTabSize } =
+                    const { gridLayout, showContinueReadingButton, showDownloadBadge, showUnreadBadge } =
-                        options;
+                        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,
+                                    )
                                 }
                             />
                         </>

src/components/library/LibraryOptionsProvider.tsx

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

src/components/library/LibraryToolbarMenu.tsx

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

src/components/library/useGetVisibleLibraryMangas.ts

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

src/components/manga/MangaBadges.tsx

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

src/components/source/SourceGridLayout.tsx

@@ -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 {
+    const [sourceGridLayout, setSourceGridLayout] = useLocalStorage('source-grid-layout', GridLayout.Compact);
-        options: { SourcegridLayout },
-        setOptions,
-    } = useLibraryOptionsContext();
 
-    function setGridContextOptions(gridLayout: GridLayout) {
+    return <GridLayouts gridLayout={sourceGridLayout} onChange={setSourceGridLayout} />;
-        setOptions((prev: any) => ({ ...prev, SourcegridLayout: gridLayout }));
-    }
-
-    return <GridLayouts gridLayout={SourcegridLayout} onChange={setGridContextOptions} />;
 }

src/lib/data/Categories.ts

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

src/lib/graphql/fragments/CategoryFragments.ts

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

src/lib/graphql/generated/graphql.ts

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

src/lib/metadata/categoryMetadata.ts

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

src/lib/metadata/metadata.ts

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

src/lib/metadata/metadataServerSettings.ts

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

src/screens/Library.tsx

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

src/screens/SourceMangas.tsx

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

src/typings.ts

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