Cleanup deprecated metadata after migration

- delete deprecated metadata
- save applied migration id per metadata holder

src/modules/library/components/LibraryMangaGrid.tsx

@@ -8,8 +8,9 @@
 
 import React, { useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { GridLayout, useLibraryOptionsContext } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
+import { useLibraryOptionsContext } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
 import { IMangaGridProps, MangaGrid } from '@/modules/manga/components/MangaGrid.tsx';
+import { GridLayout } from '@/modules/core/Core.types.ts';
 
 interface LibraryMangaGridProps
     extends Required<Pick<IMangaGridProps, 'isSelectModeActive' | 'selectedMangaIds' | 'handleSelection' | 'mangas'>>,

src/modules/library/components/LibraryOptionsPanel.tsx

@@ -8,19 +8,17 @@
 
 import FormLabel from '@mui/material/FormLabel';
 import RadioGroup from '@mui/material/RadioGroup';
-import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.tsx';
 import { RadioInput } from '@/modules/core/components/inputs/RadioInput.tsx';
 import { SortRadioInput } from '@/modules/core/components/inputs/SortRadioInput.tsx';
 import { ThreeStateCheckboxInput } from '@/modules/core/components/inputs/ThreeStateCheckboxInput.tsx';
-import { GridLayout } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
 import { OptionsTabs } from '@/modules/core/components/OptionsTabs.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { Trackers } from '@/modules/tracker/services/Trackers.ts';
 import { GetTrackersSettingsQuery, MangaStatus } from '@/lib/graphql/generated/graphql.ts';
 import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/queries/TrackerQuery.ts';
-import { createUpdateCategoryMetadata, getCategoryMetadata } from '@/modules/category/services/CategoryMetadata.ts';
+import { createUpdateCategoryMetadata, useGetCategoryMetadata } from '@/modules/category/services/CategoryMetadata.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import {
     createUpdateMetadataServerSettings,
@@ -30,6 +28,7 @@ import { TranslationKey } from '@/Base.types.ts';
 import { LibrarySortMode } from '@/modules/library/Library.types.ts';
 import { CategoryMetadataInfo } from '@/modules/category/Category.types.ts';
 import { statusToTranslationKey } from '@/modules/manga/Manga.constants.ts';
+import { GridLayout } from '@/modules/core/Core.types.ts';
 
 const TITLES: { [key in 'filter' | 'sort' | 'display']: TranslationKey } = {
     filter: 'global.label.filter',
@@ -61,7 +60,7 @@ export const LibraryOptionsPanel = ({
     const trackerList = requestManager.useGetTrackerList<GetTrackersSettingsQuery>(GET_TRACKERS_SETTINGS);
     const loggedInTrackers = Trackers.getLoggedIn(trackerList.data?.trackers.nodes ?? []);
 
-    const categoryLibraryOptions = useMemo(() => getCategoryMetadata(category), [category]);
+    const categoryLibraryOptions = useGetCategoryMetadata(category);
     const updateCategoryLibraryOptions = createUpdateCategoryMetadata(category, () =>
         makeToast(t('global.error.label.failed_to_save_changes', 'error')),
     );

src/modules/library/contexts/LibraryOptionsContext.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useContext } from 'react';
-import { getDefaultCategoryMetadata } from '@/modules/category/services/CategoryMetadata.ts';
+import { DEFAULT_CATEGORY_METADATA } from '@/modules/category/services/CategoryMetadata.ts';
 import { LibraryOptions } from '@/modules/library/Library.types.ts';
 
 type ContextType = {
@@ -15,14 +15,8 @@ type ContextType = {
     setOptions: React.Dispatch<React.SetStateAction<LibraryOptions>>;
 };
 
-export enum GridLayout {
-    Compact = 0,
-    Comfortable = 1,
-    List = 2,
-}
-
 export const LibraryOptionsContext = React.createContext<ContextType>({
-    options: getDefaultCategoryMetadata(),
+    options: DEFAULT_CATEGORY_METADATA,
     setOptions: () => {},
 });
 

src/modules/library/contexts/LibraryOptionsProvider.tsx

@@ -9,7 +9,7 @@
 import React, { useMemo } from 'react';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { LibraryOptionsContext } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
-import { getDefaultCategoryMetadata } from '@/modules/category/services/CategoryMetadata.ts';
+import { DEFAULT_CATEGORY_METADATA } from '@/modules/category/services/CategoryMetadata.ts';
 import { LibraryOptions } from '@/modules/library/Library.types.ts';
 
 interface IProps {
@@ -17,10 +17,10 @@ interface IProps {
 }
 
 export const LibraryOptionsContextProvider: React.FC<IProps> = ({ children }) => {
-    const [options, setOptions] = useLocalStorage<LibraryOptions>('libraryOptions', getDefaultCategoryMetadata());
+    const [options, setOptions] = useLocalStorage<LibraryOptions>('libraryOptions', DEFAULT_CATEGORY_METADATA);
 
     const value = useMemo(
-        () => ({ options: { ...getDefaultCategoryMetadata(), ...options }, setOptions }),
+        () => ({ options: { ...DEFAULT_CATEGORY_METADATA, ...options }, setOptions }),
         [options, setOptions],
     );
 

src/modules/library/hooks/useGetVisibleLibraryMangas.ts

@@ -11,10 +11,10 @@ import { useMemo } from 'react';
 import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
 import { ChapterType, MangaType, SourceType, TrackRecordType } from '@/lib/graphql/generated/graphql.ts';
 import { enhancedCleanup } from '@/util/Strings.ts';
-import { getCategoryMetadata } from '@/modules/category/services/CategoryMetadata.ts';
+import { useGetCategoryMetadata } from '@/modules/category/services/CategoryMetadata.ts';
 import { NullAndUndefined } from '@/Base.types.ts';
 import { LibraryOptions, LibrarySortMode } from '@/modules/library/Library.types.ts';
-import { CategoryMetadataInfo } from '@/modules/category/Category.types.ts';
+import { CategoryIdInfo, CategoryMetadataInfo } from '@/modules/category/Category.types.ts';
 import { MangaChapterCountInfo, MangaIdInfo } from '@/modules/manga/Manga.types.ts';
 
 const triStateFilter = (
@@ -198,6 +198,7 @@ const sortManga = <Manga extends TMangaSort>(
     return result;
 };
 
+const DEFAULT_CATEGORY: CategoryIdInfo = { id: -1 };
 export const useGetVisibleLibraryMangas = <Manga extends MangaIdInfo & TMangasFilter & TMangaSort>(
     mangas: Manga[],
     category?: CategoryMetadataInfo,
@@ -206,7 +207,7 @@ export const useGetVisibleLibraryMangas = <Manga extends MangaIdInfo & TMangasFi
     showFilteredOutMessage: boolean;
 } => {
     const [query] = useQueryParam('query', StringParam);
-    const options = getCategoryMetadata(category);
+    const options = useGetCategoryMetadata(category ?? DEFAULT_CATEGORY);
     const {
         hasUnreadChapters,
         hasDownloadedChapters,

src/modules/library/screens/Library.tsx

@@ -84,7 +84,7 @@ export function Library() {
     const activeTab: (typeof tabs)[number] | undefined = tabs.find((tab) => tab.order === tabSearchParam) ?? tabs[0];
 
     useLayoutEffect(() => {
-        setOptions(getCategoryMetadata(activeTab));
+        setOptions(getCategoryMetadata(activeTab ?? { id: -1 }));
     }, [activeTab]);
 
     const {
@@ -169,7 +169,7 @@ export function Library() {
         setTitle(navBarTitle, title);
         setAction(
             <>
-                {!isSelectModeActive && (
+                {!isSelectModeActive && activeTab && (
                     <>
                         <AppbarSearch />
                         <LibraryToolbarMenu category={activeTab} />

src/modules/library/screens/LibraryDuplicates.tsx

@@ -17,7 +17,6 @@ import Box from '@mui/material/Box';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
-import { GridLayout } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
 import { GridLayouts } from '@/modules/core/components/GridLayouts.tsx';
 import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
@@ -33,6 +32,7 @@ import { IMangaGridProps } from '@/modules/manga/components/MangaGrid.tsx';
 import { StyledGroupItemWrapper } from '@/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx';
 import { VirtuosoUtil } from '@/lib/virtuoso/Virtuoso.util.tsx';
 import { LibraryDuplicatesWorkerInput, TMangaDuplicate, TMangaDuplicates } from '@/modules/library/Library.types.ts';
+import { GridLayout } from '@/modules/core/Core.types.ts';
 
 export const LibraryDuplicates = () => {
     const { t } = useTranslation();