536c1c37b1
- Introduced new appearance settings page with a dark mode toggle feature. - Added localization support for English, Spanish, and Portuguese in appearance settings. - Removed the ThemeSelector component and updated PreferenceSelector accordingly.
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
// Core dependencies
|
|
import React, { Suspense, useEffect } from 'react';
|
|
import { RouterProvider } from 'react-router-dom';
|
|
import i18next from 'i18next';
|
|
|
|
// Components
|
|
import ThemeWrapper from './features/theme/ThemeWrapper';
|
|
import PreferenceSelector from './components/PreferenceSelector';
|
|
|
|
// Routes
|
|
import router from './app/routes';
|
|
|
|
// Hooks & Utils
|
|
import { useAppSelector } from './hooks/useAppSelector';
|
|
import { initMixpanel } from './utils/mixpanelInit';
|
|
|
|
// Types & Constants
|
|
import { Language } from './features/i18n/localesSlice';
|
|
import logger from './utils/errorLogger';
|
|
import { SuspenseFallback } from './components/suspense-fallback/suspense-fallback';
|
|
|
|
const App: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
|
const language = useAppSelector(state => state.localesReducer.lng);
|
|
|
|
initMixpanel(import.meta.env.VITE_MIXPANEL_TOKEN as string);
|
|
|
|
useEffect(() => {
|
|
document.documentElement.setAttribute('data-theme', themeMode);
|
|
}, [themeMode]);
|
|
|
|
useEffect(() => {
|
|
i18next.changeLanguage(language || Language.EN, err => {
|
|
if (err) return logger.error('Error changing language', err);
|
|
});
|
|
}, [language]);
|
|
|
|
return (
|
|
<Suspense fallback={<SuspenseFallback />}>
|
|
<ThemeWrapper>
|
|
<RouterProvider router={router} future={{ v7_startTransition: true }} />
|
|
</ThemeWrapper>
|
|
</Suspense>
|
|
);
|
|
};
|
|
|
|
export default App;
|