Move app theme related types to dedicated file

Fixes circular dependency.

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;