Male library "grid layout" setting global

src/modules/category/services/CategoryMetadata.ts

@@ -21,12 +21,8 @@ import {
     Metadata,
     MetadataHolder,
 } from '@/modules/metadata/Metadata.types.ts';
-import { GridLayout } from '@/modules/core/Core.types.ts';
 
 export const DEFAULT_CATEGORY_METADATA: ICategoryMetadata = {
-    // display options
-    gridLayout: GridLayout.Compact,
-
     // sort options
     sortDesc: undefined,
     sortBy: undefined,

src/modules/library/Library.types.ts

@@ -18,6 +18,7 @@ export type MetadataLibrarySettings = {
     showContinueReadingButton: boolean;
     showDownloadBadge: boolean;
     showUnreadBadge: boolean;
+    gridLayout: GridLayout;
 };
 export type LibrarySortMode =
     | 'unreadChapters'
@@ -29,9 +30,6 @@ export type LibrarySortMode =
     | 'latestUploadedChapter';
 
 export interface LibraryOptions {
-    // display options
-    gridLayout: GridLayout;
-
     // sort options
     sortBy: NullAndUndefined<LibrarySortMode>;
     sortDesc: NullAndUndefined<boolean>;

src/modules/library/components/LibraryMangaGrid.tsx

@@ -8,9 +8,9 @@
 
 import React, { useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-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';
+import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
 
 interface LibraryMangaGridProps
     extends Required<Pick<IMangaGridProps, 'isSelectModeActive' | 'selectedMangaIds' | 'handleSelection' | 'mangas'>>,
@@ -29,10 +29,12 @@ export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({
 }) => {
     const { t } = useTranslation();
 
-    const { options } = useLibraryOptionsContext();
+    const {
+        settings: { gridLayout },
+    } = useMetadataServerSettings();
 
     useLayoutEffect(() => {
-        document.body.style.overflowY = options.gridLayout === GridLayout.List ? 'auto' : 'scroll';
+        document.body.style.overflowY = gridLayout === GridLayout.List ? 'auto' : 'scroll';
         return () => {
             document.body.style.overflowY = 'auto';
         };
@@ -46,7 +48,7 @@ export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({
             loadMore={loadMoreNoop}
             message={showFilteredOutMessage ? t('library.error.label.no_matches') : message}
             messageExtra={showFilteredOutMessage ? undefined : messageExtra}
-            gridLayout={options.gridLayout}
+            gridLayout={gridLayout}
         />
     );
 };

src/modules/library/components/LibraryOptionsPanel.tsx

@@ -68,7 +68,7 @@ export const LibraryOptionsPanel = ({
     );
 
     const {
-        settings: { showTabSize, showContinueReadingButton, showDownloadBadge, showUnreadBadge },
+        settings: { showTabSize, showContinueReadingButton, showDownloadBadge, showUnreadBadge, gridLayout },
     } = useMetadataServerSettings();
     const setSettingValue = createUpdateMetadataServerSettings((e) =>
         makeToast(t('search.error.label.failed_to_save_settings'), 'error', getErrorMessage(e)),
@@ -156,12 +156,11 @@ export const LibraryOptionsPanel = ({
                     ));
                 }
                 if (key === 'display') {
-                    const { gridLayout } = categoryLibraryOptions;
                     return (
                         <>
                             <FormLabel>{t('global.grid_layout.title')}</FormLabel>
                             <RadioGroup
-                                onChange={(e) => updateCategoryLibraryOptions('gridLayout', Number(e.target.value))}
+                                onChange={(e) => updateMetadataServerSettings('gridLayout', Number(e.target.value))}
                                 value={gridLayout}
                             >
                                 <RadioInput

src/modules/settings/Settings.constants.ts

@@ -9,6 +9,7 @@
 import { DEFAULT_DEVICE } from '@/modules/device/services/Device.ts';
 import { DEFAULT_SORT_SETTINGS } from '@/modules/migration/Migration.constants.ts';
 import { MetadataServerSettings } from '@/modules/settings/Settings.types.ts';
+import { GridLayout } from '@/modules/core/Core.types.ts';
 
 export const SERVER_SETTINGS_METADATA_DEFAULT: MetadataServerSettings = {
     // downloads
@@ -25,6 +26,7 @@ export const SERVER_SETTINGS_METADATA_DEFAULT: MetadataServerSettings = {
     showContinueReadingButton: false,
     showDownloadBadge: false,
     showUnreadBadge: false,
+    gridLayout: GridLayout.Compact,
 
     // client
     devices: [DEFAULT_DEVICE],