Save appearance settings on server

- app theme
- theme mode
- pure black mode
- manga grid item width

src/modules/manga/components/MangaGrid.tsx

@@ -25,7 +25,7 @@ import { useTranslation } from 'react-i18next';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/feedback/LoadingPlaceholder.tsx';
 import { MangaCard } from '@/modules/manga/components/cards/MangaCard.tsx';
-import { useLocalStorage, useSessionStorage } from '@/modules/core/hooks/useStorage.tsx';
+import { useSessionStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { SelectableCollectionReturnType } from '@/modules/collection/hooks/useSelectableCollection.ts';
 import { DEFAULT_FULL_FAB_HEIGHT } from '@/modules/core/components/buttons/StyledFab.tsx';
 import { AppStorage } from '@/lib/storage/AppStorage.ts';
@@ -34,6 +34,7 @@ import { MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { GridLayout } from '@/modules/core/Core.types.ts';
+import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
 
 const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
     <Grid {...props} ref={ref} container spacing={1}>
@@ -255,6 +256,9 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
     const { t } = useTranslation();
 
     const { navBarWidth } = useNavBarContext();
+    const {
+        settings: { mangaGridItemWidth },
+    } = useMetadataServerSettings();
 
     const gridRef = useRef<HTMLDivElement>(null);
     const gridWrapperRef = useRef<HTMLDivElement>(null);
@@ -262,10 +266,9 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
     const [dimensions, setDimensions] = useState(
         gridWrapperRef.current?.offsetWidth ?? Math.max(0, document.documentElement.offsetWidth - navBarWidth),
     );
-    const [gridItemWidth] = useLocalStorage<number>('ItemWidth', 300);
     const GridItemContainer = useMemo(
-        () => GridItemContainerWithDimension(dimensions, gridItemWidth, gridLayout),
+        () => GridItemContainerWithDimension(dimensions, mangaGridItemWidth, gridLayout),
-        [dimensions, gridItemWidth, gridLayout],
+        [dimensions, mangaGridItemWidth, gridLayout],
     );
 
     // always show vertical scrollbar to prevent https://github.com/Suwayomi/Suwayomi-WebUI/issues/758

src/modules/metadata/Metadata.constants.ts

@@ -89,6 +89,10 @@ const APP_METADATA_OBJECT: Record<AppMetadataKeys, undefined> = {
     showNsfw: undefined,
     shouldUseInfiniteScroll: undefined,
     shouldShowTransitionPage: undefined,
+    appTheme: undefined,
+    themeMode: undefined,
+    shouldUsePureBlackMode: undefined,
+    mangaGridItemWidth: undefined,
 };
 
 export const VALID_APP_METADATA_KEYS = Object.keys(APP_METADATA_OBJECT);

src/modules/metadata/Metadata.types.ts

@@ -21,7 +21,7 @@ export interface IMetadataMigration {
          * Otherwise, all metadata keys will get migrated.
          */
         key?: string;
-        oldValue: string | RegExp;
+        oldValue: string | RegExp | undefined;
         newValue: string | ((oldValue: string) => string);
     }[];
     keys?: { oldKey: string; newKey: string }[];

src/modules/metadata/services/MetadataMigrations.ts

@@ -83,7 +83,10 @@ const applyMetadataValueMigration = (meta: Metadata, migration: IMetadataMigrati
 
     metadataValueChanges.forEach(({ key, oldValue, newValue }) => {
         const migrateValue = (metaKey: string) => {
-            if (meta[metaKey].match(oldValue)) {
+            if (
+                (oldValue === undefined && meta[metaKey] === oldValue) ||
+                (oldValue !== undefined && meta[metaKey].match(oldValue))
+            ) {
                 migratedMetadata[metaKey] = typeof newValue === 'function' ? newValue(meta[metaKey]) : newValue;
             }
         };

src/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx

@@ -11,9 +11,7 @@ import { CacheProvider } from '@emotion/react';
 import { ThemeProvider } from '@mui/material/styles';
 import Box, { BoxProps } from '@mui/material/Box';
 import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
-import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
+import { getTheme } from '@/modules/theme/services/AppThemes.ts';
-import { AppThemes, getTheme } from '@/modules/theme/services/AppThemes.ts';
-import { ThemeMode } from '@/modules/theme/contexts/AppThemeContext.tsx';
 import { createTheme } from '@/modules/theme/services/ThemeCreator.ts';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
@@ -25,17 +23,13 @@ const BaseReaderProgressBarDirectionWrapper = forwardRef<
         direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
     }
 >(({ direction, ...boxProps }, ref) => {
-    const [appTheme] = useLocalStorage<AppThemes>('appTheme', 'default');
-    const [themeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
-    const [pureBlackMode] = useLocalStorage<boolean>('pureBlackMode', false);
-
     const {
-        settings: { customThemes },
+        settings: { customThemes, appTheme, themeMode, shouldUsePureBlackMode },
     } = useMetadataServerSettings();
 
     const readerTheme = useMemo(
-        () => createTheme(themeMode, getTheme(appTheme, customThemes), pureBlackMode, direction),
+        () => createTheme(themeMode, getTheme(appTheme, customThemes), shouldUsePureBlackMode, direction),
-        [themeMode, appTheme, customThemes, pureBlackMode, direction],
+        [themeMode, appTheme, customThemes, shouldUsePureBlackMode, direction],
     );
 
     return (

src/modules/settings/Settings.constants.ts

@@ -11,6 +11,7 @@ import { DEFAULT_SORT_SETTINGS } from '@/modules/migration/Migration.constants.t
 import { MetadataServerSettings } from '@/modules/settings/Settings.types.ts';
 import { GridLayout } from '@/modules/core/Core.types.ts';
 import { getDefaultLanguages } from '@/modules/core/utils/Languages.ts';
+import { ThemeMode } from '@/modules/theme/contexts/AppThemeContext.tsx';
 
 export const SERVER_SETTINGS_METADATA_DEFAULT: MetadataServerSettings = {
     // downloads
@@ -56,7 +57,11 @@ export const SERVER_SETTINGS_METADATA_DEFAULT: MetadataServerSettings = {
     serverInformAvailableUpdate: true,
 
     // themes
+    appTheme: 'default',
+    themeMode: ThemeMode.SYSTEM,
+    shouldUsePureBlackMode: false,
     customThemes: {},
     mangaThumbnailBackdrop: true,
     mangaDynamicColorSchemes: true,
+    mangaGridItemWidth: 300,
 };

src/modules/settings/screens/Appearance.tsx

@@ -19,7 +19,6 @@ import { ThemeMode, useAppThemeContext } from '@/modules/theme/contexts/AppTheme
 import { Select } from '@/modules/core/components/inputs/Select.tsx';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
-import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { I18nResourceCode, i18nResources } from '@/i18n';
 import { languageCodeToName } from '@/modules/core/utils/Languages.ts';
 import { ThemeList } from '@/modules/theme/components/ThemeList.tsx';
@@ -35,17 +34,18 @@ import { MetadataThemeSettings } from '@/modules/theme/AppTheme.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { AppStorage } from '@/lib/storage/AppStorage.ts';
 import { useAppTitle } from '@/modules/navigation-bar/hooks/useAppTitle.ts';
+import { SERVER_SETTINGS_METADATA_DEFAULT } from '@/modules/settings/Settings.constants.ts';
 
 export const Appearance = () => {
     const { t, i18n } = useTranslation();
-    const { themeMode, setThemeMode, pureBlackMode, setPureBlackMode } = useAppThemeContext();
+    const { themeMode, setThemeMode, shouldUsePureBlackMode, setShouldUsePureBlackMode } = useAppThemeContext();
     const { mode, setMode } = useColorScheme();
     const actualThemeMode = (mode ?? themeMode) as ThemeMode;
 
     useAppTitle(t('settings.appearance.title'));
 
     const {
-        settings,
+        settings: { mangaThumbnailBackdrop, mangaDynamicColorSchemes, mangaGridItemWidth },
         request: { loading, error, refetch },
     } = useMetadataServerSettings();
     const updateMetadataSetting = createUpdateMetadataServerSettings<keyof MetadataThemeSettings>((e) =>
@@ -54,9 +54,6 @@ export const Appearance = () => {
 
     const isDarkMode = MediaQuery.getThemeMode() === ThemeMode.DARK;
 
-    const DEFAULT_ITEM_WIDTH = 300;
-    const [itemWidth, setItemWidth] = useLocalStorage<number>('ItemWidth', DEFAULT_ITEM_WIDTH);
-
     if (loading) {
         return <LoadingPlaceholder />;
     }
@@ -107,7 +104,10 @@ export const Appearance = () => {
             {isDarkMode && (
                 <ListItem>
                     <ListItemText primary={t('settings.appearance.theme.pure_black_mode')} />
-                    <Switch checked={pureBlackMode} onChange={(_, enabled) => setPureBlackMode(enabled)} />
+                    <Switch
+                        checked={shouldUsePureBlackMode}
+                        onChange={(_, enabled) => setShouldUsePureBlackMode(enabled)}
+                    />
                 </ListItem>
             )}
             <List
@@ -152,15 +152,15 @@ export const Appearance = () => {
                 </ListItem>
                 <NumberSetting
                     settingTitle={t('settings.label.manga_item_width')}
-                    settingValue={`px: ${itemWidth}`}
+                    settingValue={`px: ${mangaGridItemWidth}`}
-                    value={itemWidth}
+                    value={mangaGridItemWidth}
-                    defaultValue={DEFAULT_ITEM_WIDTH}
+                    defaultValue={SERVER_SETTINGS_METADATA_DEFAULT.mangaGridItemWidth}
                     minValue={100}
                     maxValue={1000}
                     stepSize={10}
                     valueUnit="px"
                     showSlider
-                    handleUpdate={setItemWidth}
+                    handleUpdate={(width) => updateMetadataSetting('mangaGridItemWidth', width)}
                 />
 
                 <ListItem>
@@ -170,7 +170,7 @@ export const Appearance = () => {
                     />
                     <Switch
                         edge="end"
-                        checked={settings.mangaThumbnailBackdrop}
+                        checked={mangaThumbnailBackdrop}
                         onChange={(e) => updateMetadataSetting('mangaThumbnailBackdrop', e.target.checked)}
                     />
                 </ListItem>
@@ -182,7 +182,7 @@ export const Appearance = () => {
                     />
                     <Switch
                         edge="end"
-                        checked={settings.mangaDynamicColorSchemes}
+                        checked={mangaDynamicColorSchemes}
                         onChange={(e) => updateMetadataSetting('mangaDynamicColorSchemes', e.target.checked)}
                     />
                 </ListItem>

src/modules/theme/AppTheme.types.ts

@@ -6,10 +6,15 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { AppTheme } from '@/modules/theme/services/AppThemes.ts';
+import { AppTheme, AppThemes } from '@/modules/theme/services/AppThemes.ts';
+import { ThemeMode } from '@/modules/theme/contexts/AppThemeContext.tsx';
 
 export type MetadataThemeSettings = {
+    appTheme: AppThemes;
+    themeMode: ThemeMode;
+    shouldUsePureBlackMode: boolean;
     customThemes: Record<string, AppTheme>;
     mangaThumbnailBackdrop: boolean;
     mangaDynamicColorSchemes: boolean;
+    mangaGridItemWidth: number;
 };

src/modules/theme/components/ThemePreview.tsx

@@ -37,15 +37,15 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
 
     const { t } = useTranslation();
     const theme = useTheme();
-    const { themeMode, setAppTheme, appTheme: activeAppTheme, pureBlackMode } = useAppThemeContext();
+    const { themeMode, setAppTheme, appTheme: activeAppTheme, shouldUsePureBlackMode } = useAppThemeContext();
 
     const popupState = usePopupState({ variant: 'popover', popupId: `theme-edit-dialog-${appTheme.id}` });
 
     const isSelected = appTheme.id === activeAppTheme;
 
     const muiTheme = useMemo(
-        () => createTheme(themeMode, appTheme, pureBlackMode),
+        () => createTheme(themeMode, appTheme, shouldUsePureBlackMode),
-        [appTheme, themeMode, pureBlackMode],
+        [appTheme, themeMode, shouldUsePureBlackMode],
     );
 
     return (

src/modules/theme/contexts/AppThemeContext.tsx

@@ -19,11 +19,11 @@ export enum ThemeMode {
 
 export type TAppThemeContext = {
     appTheme: AppThemes;
-    setAppTheme: React.Dispatch<React.SetStateAction<AppThemes>>;
+    setAppTheme: (theme: AppThemes) => void;
     themeMode: ThemeMode;
-    setThemeMode: React.Dispatch<React.SetStateAction<ThemeMode>>;
+    setThemeMode: (mode: ThemeMode) => void;
-    pureBlackMode: boolean;
+    shouldUsePureBlackMode: boolean;
-    setPureBlackMode: React.Dispatch<React.SetStateAction<boolean>>;
+    setShouldUsePureBlackMode: (value: boolean) => void;
     dynamicColor: (NonNullableProperties<Palette> & { average: FastAverageColorResult }) | null;
     setDynamicColor: React.Dispatch<
         React.SetStateAction<(NonNullableProperties<Palette> & { average: FastAverageColorResult }) | null>
@@ -35,8 +35,8 @@ export const AppThemeContext = React.createContext<TAppThemeContext>({
     setAppTheme: (): void => {},
     themeMode: ThemeMode.SYSTEM,
     setThemeMode: (): void => {},
-    pureBlackMode: false,
+    shouldUsePureBlackMode: false,
-    setPureBlackMode: (): void => {},
+    setShouldUsePureBlackMode: (): void => {},
     dynamicColor: null,
     setDynamicColor: (): void => {},
 });

src/modules/theme/contexts/AppThemeContextProvider.tsx

@@ -12,21 +12,22 @@ import { CacheProvider } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
 import { AppThemeContext, TAppThemeContext, ThemeMode } from '@/modules/theme/contexts/AppThemeContext.tsx';
 import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
-import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
+import {
+    createUpdateMetadataServerSettings,
+    useMetadataServerSettings,
+} from '@/modules/settings/services/ServerSettingsMetadata.ts';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
-import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
+import { getTheme } from '@/modules/theme/services/AppThemes.ts';
-import { AppThemes, getTheme } from '@/modules/theme/services/AppThemes.ts';
 import { createAndSetTheme } from '@/modules/theme/services/ThemeCreator.ts';
+import { makeToast } from '@/modules/core/utils/Toast.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 
 export const AppThemeContextProvider = ({ children }: { children: ReactNode }) => {
-    const { i18n } = useTranslation();
+    const { t, i18n } = useTranslation();
     const { mode } = useColorScheme();
     const {
-        settings: { customThemes },
+        settings: { appTheme, themeMode, shouldUsePureBlackMode, customThemes },
     } = useMetadataServerSettings();
-    const [appTheme, setAppTheme] = useLocalStorage<AppThemes>('appTheme', 'default');
-    const [themeMode, setThemeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
-    const [pureBlackMode, setPureBlackMode] = useLocalStorage<boolean>('pureBlackMode', false);
 
     const directionRef = useRef<Direction>('ltr');
 
@@ -36,18 +37,23 @@ export const AppThemeContextProvider = ({ children }: { children: ReactNode }) =
     const actualThemeMode = mode ?? themeMode ?? 'dark';
     const currentDirection = i18n.dir();
 
+    const updateSetting = createUpdateMetadataServerSettings<'appTheme' | 'themeMode' | 'shouldUsePureBlackMode'>((e) =>
+        makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
+    );
+
     const appThemeContext = useMemo(
-        () => ({
+        () =>
-            appTheme,
+            ({
-            setAppTheme,
+                appTheme,
-            themeMode,
+                setAppTheme: (value) => updateSetting('appTheme', value),
-            setThemeMode,
+                themeMode,
-            pureBlackMode,
+                setThemeMode: (value) => updateSetting('themeMode', value),
-            setPureBlackMode,
+                shouldUsePureBlackMode,
-            dynamicColor,
+                setShouldUsePureBlackMode: (value) => updateSetting('shouldUsePureBlackMode', value),
-            setDynamicColor,
+                dynamicColor,
-        }),
+                setDynamicColor,
-        [themeMode, pureBlackMode, appTheme, dynamicColor],
+            }) satisfies TAppThemeContext,
+        [themeMode, shouldUsePureBlackMode, appTheme, dynamicColor],
     );
 
     const theme = useMemo(
@@ -55,11 +61,19 @@ export const AppThemeContextProvider = ({ children }: { children: ReactNode }) =
             createAndSetTheme(
                 actualThemeMode as ThemeMode,
                 getTheme(appTheme, customThemes),
-                pureBlackMode,
+                shouldUsePureBlackMode,
                 currentDirection,
                 dynamicColor,
             ),
-        [actualThemeMode, currentDirection, systemThemeMode, pureBlackMode, appTheme, customThemes, dynamicColor],
+        [
+            actualThemeMode,
+            currentDirection,
+            systemThemeMode,
+            shouldUsePureBlackMode,
+            appTheme,
+            customThemes,
+            dynamicColor,
+        ],
     );
 
     useLayoutEffect(() => {