Merge "Context" and "ContextProvider" components

src/features/theme/AppTheme.types.ts

@@ -7,7 +7,7 @@
  */
 
 import { AppTheme, AppThemes } from '@/features/theme/services/AppThemes.ts';
-import { ThemeMode } from '@/features/theme/contexts/AppThemeContext.tsx';
+import { ThemeMode } from '@/features/theme/AppThemeContext.tsx';
 
 export type MetadataThemeSettings = {
     appTheme: AppThemes;

src/features/theme/AppThemeContext.tsx

@@ -6,24 +6,57 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ReactNode, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { ReactNode, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Palette } from '@vibrant/color';
+import { FastAverageColorResult } from 'fast-average-color';
+import { useTranslation } from 'react-i18next';
 import { Direction, ThemeProvider } from '@mui/material/styles';
 import { CacheProvider } from '@emotion/react';
-import { useTranslation } from 'react-i18next';
-import { AppThemeContext, TAppThemeContext, ThemeMode } from '@/features/theme/contexts/AppThemeContext.tsx';
-import { DIRECTION_TO_CACHE } from '@/features/theme/ThemeDirectionCache.ts';
+import { AppTheme, AppThemes, getTheme } from '@/features/theme/services/AppThemes.ts';
 import {
     createUpdateMetadataServerSettings,
     useMetadataServerSettings,
 } from '@/features/settings/services/ServerSettingsMetadata.ts';
+import { useLocalStorage } from '@/features/core/hooks/useStorage.tsx';
+import { MUI_THEME_MODE_KEY } from '@/lib/mui/MUI.constants.ts';
 import { MediaQuery } from '@/features/core/utils/MediaQuery.tsx';
-import { AppTheme, getTheme } from '@/features/theme/services/AppThemes.ts';
-import { createAndSetTheme } from '@/features/theme/services/ThemeCreator.ts';
 import { makeToast } from '@/features/core/utils/Toast.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { useLocalStorage } from '@/features/core/hooks/useStorage.tsx';
+import { createAndSetTheme } from '@/features/theme/services/ThemeCreator.ts';
 import { AppStorage } from '@/lib/storage/AppStorage.ts';
-import { MUI_THEME_MODE_KEY } from '@/lib/mui/MUI.constants.ts';
+import { DIRECTION_TO_CACHE } from '@/features/theme/ThemeDirectionCache.ts';
+
+export enum ThemeMode {
+    SYSTEM = 'system',
+    DARK = 'dark',
+    LIGHT = 'light',
+}
+
+export type TAppThemeContext = {
+    appTheme: AppThemes;
+    setAppTheme: (theme: AppThemes) => void;
+    themeMode: ThemeMode;
+    setThemeMode: (mode: ThemeMode) => void;
+    shouldUsePureBlackMode: boolean;
+    setShouldUsePureBlackMode: (value: boolean) => void;
+    dynamicColor: (NonNullableProperties<Palette> & { average: FastAverageColorResult }) | null;
+    setDynamicColor: React.Dispatch<
+        React.SetStateAction<(NonNullableProperties<Palette> & { average: FastAverageColorResult }) | null>
+    >;
+};
+
+export const AppThemeContext = React.createContext<TAppThemeContext>({
+    appTheme: 'default',
+    setAppTheme: (): void => {},
+    themeMode: ThemeMode.SYSTEM,
+    setThemeMode: (): void => {},
+    shouldUsePureBlackMode: false,
+    setShouldUsePureBlackMode: (): void => {},
+    dynamicColor: null,
+    setDynamicColor: (): void => {},
+});
+
+export const useAppThemeContext = () => useContext(AppThemeContext);
 
 export const AppThemeContextProvider = ({ children }: { children: ReactNode }) => {
     const { t, i18n } = useTranslation();

src/features/theme/components/ThemePreview.tsx

@@ -19,7 +19,7 @@ import IconButton from '@mui/material/IconButton';
 import EditIcon from '@mui/icons-material/Edit';
 import { bindDialog, usePopupState } from 'material-ui-popup-state/hooks';
 import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
-import { useAppThemeContext } from '@/features/theme/contexts/AppThemeContext.tsx';
+import { useAppThemeContext } from '@/features/theme/AppThemeContext.tsx';
 import { AppTheme, hasMissingFonts, loadThemeFonts } from '@/features/theme/services/AppThemes.ts';
 import { createTheme } from '@/features/theme/services/ThemeCreator.ts';
 import { ThemeCreationDialog } from '@/features/theme/components/CreateThemeDialog.tsx';

src/features/theme/contexts/AppThemeContext.tsx

@@ -1,44 +0,0 @@
-/*
- * 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 React, { useContext } from 'react';
-import { Palette } from '@vibrant/color';
-import { FastAverageColorResult } from 'fast-average-color';
-import { AppThemes } from '@/features/theme/services/AppThemes.ts';
-
-export enum ThemeMode {
-    SYSTEM = 'system',
-    DARK = 'dark',
-    LIGHT = 'light',
-}
-
-export type TAppThemeContext = {
-    appTheme: AppThemes;
-    setAppTheme: (theme: AppThemes) => void;
-    themeMode: ThemeMode;
-    setThemeMode: (mode: ThemeMode) => void;
-    shouldUsePureBlackMode: boolean;
-    setShouldUsePureBlackMode: (value: boolean) => void;
-    dynamicColor: (NonNullableProperties<Palette> & { average: FastAverageColorResult }) | null;
-    setDynamicColor: React.Dispatch<
-        React.SetStateAction<(NonNullableProperties<Palette> & { average: FastAverageColorResult }) | null>
-    >;
-};
-
-export const AppThemeContext = React.createContext<TAppThemeContext>({
-    appTheme: 'default',
-    setAppTheme: (): void => {},
-    themeMode: ThemeMode.SYSTEM,
-    setThemeMode: (): void => {},
-    shouldUsePureBlackMode: false,
-    setShouldUsePureBlackMode: (): void => {},
-    dynamicColor: null,
-    setDynamicColor: (): void => {},
-});
-
-export const useAppThemeContext = () => useContext(AppThemeContext);

src/features/theme/services/ThemeCreator.ts

@@ -22,7 +22,7 @@ import { deepmerge } from '@mui/utils';
 // eslint-disable-next-line no-restricted-imports
 import { PaletteBackgroundChannel } from '@mui/material/styles/createThemeWithVars';
 import { Palette } from '@vibrant/color';
-import { TAppThemeContext, ThemeMode } from '@/features/theme/contexts/AppThemeContext.tsx';
+import { TAppThemeContext, ThemeMode } from '@/features/theme/AppThemeContext.tsx';
 import { MediaQuery } from '@/features/core/utils/MediaQuery.tsx';
 import { AppTheme, loadThemeFonts } from '@/features/theme/services/AppThemes.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';