Move app theme related types to dedicated file

Fixes circular dependency.

src/base/utils/MediaQuery.tsx

@@ -10,8 +10,8 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { Breakpoint, SxProps, Theme } from '@mui/material/styles';
 import { useCallback, useState } from 'react';
 import { getCurrentTheme } from '@/features/theme/services/ThemeCreator.ts';
-import { ThemeMode } from '@/features/theme/AppThemeContext.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
+import { ThemeMode } from '@/features/theme/AppTheme.types.ts';
 
 export class MediaQuery {
     static readonly MOBILE_WIDTH: Breakpoint | number = 'sm';

src/features/authentication/components/SplashScreen.tsx

@@ -11,7 +11,8 @@ import Stack, { StackProps } from '@mui/material/Stack';
 import { ComponentProps } from 'react';
 import { SuwayomiLogo } from '@/assets/SuwayomiLogo.tsx';
 import { ServerAddressSetting } from '@/features/settings/components/ServerAddressSetting.tsx';
-import { ThemeMode } from '@/features/theme/AppThemeContext.tsx';
+
+import { ThemeMode } from '@/features/theme/AppTheme.types.ts';
 
 export const SplashScreen = ({
     slots,

src/features/manga/components/details/Thumbnail.tsx

@@ -18,7 +18,8 @@ import { Mangas } from '@/features/manga/services/Mangas.ts';
 import { SpinnerImage } from '@/base/components/SpinnerImage.tsx';
 import { MANGA_COVER_ASPECT_RATIO } from '@/features/manga/Manga.constants.ts';
 import { MangaThumbnailInfo } from '@/features/manga/Manga.types.ts';
-import { TAppThemeContext, useAppThemeContext } from '@/features/theme/AppThemeContext.tsx';
+import { useAppThemeContext } from '@/features/theme/AppThemeContext.tsx';
+import { TAppThemeContext } from '@/features/theme/AppTheme.types.ts';
 
 export const Thumbnail = ({
     manga,

src/features/settings/Settings.constants.ts

@@ -12,9 +12,9 @@ import { DEFAULT_SORT_SETTINGS } from '@/features/migration/Migration.constants.
 import { GlobalUpdateSkipEntriesSettings, MetadataServerSettings } from '@/features/settings/Settings.types.ts';
 import { GridLayout, TranslationKey } from '@/base/Base.types.ts';
 import { getDefaultLanguages } from '@/base/utils/Languages.ts';
-import { ThemeMode } from '@/features/theme/AppThemeContext.tsx';
 import { SelectSettingValue, SelectSettingValueDisplayInfo } from '@/base/components/settings/SelectSetting.tsx';
 import { AuthMode, WebUiChannel, WebUiFlavor, WebUiInterface } from '@/lib/graphql/generated/graphql.ts';
+import { ThemeMode } from '@/features/theme/AppTheme.types.ts';
 
 export const MANGA_GRID_WIDTH = {
     min: 100,

src/features/settings/screens/Appearance.tsx

@@ -15,7 +15,7 @@ import ListSubheader from '@mui/material/ListSubheader';
 import Switch from '@mui/material/Switch';
 import Link from '@mui/material/Link';
 import { useColorScheme } from '@mui/material/styles';
-import { ThemeMode, useAppThemeContext } from '@/features/theme/AppThemeContext.tsx';
+import { useAppThemeContext } from '@/features/theme/AppThemeContext.tsx';
 import { Select } from '@/base/components/inputs/Select.tsx';
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 import { NumberSetting } from '@/base/components/settings/NumberSetting.tsx';
@@ -30,7 +30,7 @@ import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholde
 import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
-import { MetadataThemeSettings } from '@/features/theme/AppTheme.types.ts';
+import { MetadataThemeSettings, ThemeMode } from '@/features/theme/AppTheme.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { AppStorage } from '@/lib/storage/AppStorage.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';

src/features/theme/AppTheme.types.ts

@@ -6,9 +6,28 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+import { Palette } from '@vibrant/color';
+import { FastAverageColorResult } from 'fast-average-color';
 import { AppTheme, AppThemes } from '@/features/theme/services/AppThemes.ts';
-import { ThemeMode } from '@/features/theme/AppThemeContext.tsx';
 
+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 type MetadataThemeSettings = {
     appTheme: AppThemes;
     themeMode: ThemeMode;

src/features/theme/AppThemeContext.tsx

@@ -7,12 +7,10 @@
  */
 
 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 { AppTheme, AppThemes, getTheme } from '@/features/theme/services/AppThemes.ts';
+import { AppTheme, getTheme } from '@/features/theme/services/AppThemes.ts';
 import {
     createUpdateMetadataServerSettings,
     useMetadataServerSettings,
@@ -25,25 +23,7 @@ import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { createAndSetTheme } from '@/features/theme/services/ThemeCreator.ts';
 import { AppStorage } from '@/lib/storage/AppStorage.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>
-    >;
-};
+import { TAppThemeContext, ThemeMode } from '@/features/theme/AppTheme.types.ts';
 
 export const AppThemeContext = React.createContext<TAppThemeContext>({
     appTheme: 'default',

src/features/theme/services/ThemeCreator.ts

@@ -22,11 +22,11 @@ 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/AppThemeContext.tsx';
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 import { AppTheme, loadThemeFonts } from '@/features/theme/services/AppThemes.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
+import { TAppThemeContext, ThemeMode } from '@/features/theme/AppTheme.types.ts';
 
 const SCROLLBAR_SIZE = 14;