2022-12-04 17:36:30 +01:00
import { ColorScheme , ColorSchemeProvider , MantineProvider , MantineTheme } from '@mantine/core' ;
2022-11-12 22:26:45 +09:00
import { useColorScheme , useHotkeys , useLocalStorage } from '@mantine/hooks' ;
2022-08-07 12:14:37 +02:00
import { ModalsProvider } from '@mantine/modals' ;
2023-02-22 21:59:49 +01:00
import Consola from 'consola' ;
import { ReactQueryDevtools } from '@tanstack/react-query-devtools' ;
2022-12-04 17:36:30 +01:00
import { getCookie } from 'cookies-next' ;
import { GetServerSidePropsContext } from 'next' ;
import { appWithTranslation } from 'next-i18next' ;
import { AppProps } from 'next/app' ;
import Head from 'next/head' ;
2023-01-31 21:17:37 +01:00
import { useEffect , useState } from 'react' ;
2023-03-03 00:37:22 +09:00
import { Notifications } from '@mantine/notifications' ;
2023-02-22 21:59:49 +01:00
import 'video.js/dist/video-js.css' ;
2023-04-05 15:23:37 +09:00
import AsyncStorage from '@react-native-async-storage/async-storage' ;
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client' ;
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister' ;
2022-12-18 22:27:01 +01:00
import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal' ;
2022-12-19 19:55:42 +01:00
import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal' ;
2022-12-18 22:27:01 +01:00
import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal' ;
2022-12-04 21:19:40 +01:00
import { SelectElementModal } from '../components/Dashboard/Modals/SelectElement/SelectElementModal' ;
2022-12-16 21:01:06 +01:00
import { WidgetsEditModal } from '../components/Dashboard/Tiles/Widgets/WidgetsEditModal' ;
2022-12-18 22:27:01 +01:00
import { WidgetsRemoveModal } from '../components/Dashboard/Tiles/Widgets/WidgetsRemoveModal' ;
2022-12-11 13:12:39 +01:00
import { CategoryEditModal } from '../components/Dashboard/Wrappers/Category/CategoryEditModal' ;
2022-12-04 17:36:30 +01:00
import { ConfigProvider } from '../config/provider' ;
2023-02-22 21:59:49 +01:00
import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAttributesStore' ;
2022-06-08 14:58:32 +00:00
import { ColorTheme } from '../tools/color' ;
2023-03-17 22:10:00 +01:00
import { queryClient } from '../tools/server/configurations/tanstack/queryClient.tool' ;
2023-01-31 21:17:37 +01:00
import {
getServiceSidePackageAttributes ,
ServerSidePackageAttributesType ,
} from '../tools/server/getPackageVersion' ;
2023-03-17 22:10:00 +01:00
import { theme } from '../tools/server/theme/theme' ;
2022-04-24 22:36:47 +02:00
2023-02-22 21:59:49 +01:00
import { useEditModeInformationStore } from '../hooks/useEditModeInformation' ;
2023-02-05 17:16:03 +01:00
import '../styles/global.scss' ;
2023-01-31 21:17:37 +01:00
function App (
this : any ,
2023-02-22 21:59:49 +01:00
props : AppProps & {
colorScheme : ColorScheme ;
packageAttributes : ServerSidePackageAttributesType ;
editModeEnabled : boolean ;
2023-03-18 12:29:39 +01:00
defaultColorScheme : ColorScheme ;
2023-02-22 21:59:49 +01:00
}
2023-01-31 21:17:37 +01:00
) {
2022-04-24 22:36:47 +02:00
const { Component , pageProps } = props ;
2022-06-08 15:36:54 +00:00
const [ primaryColor , setPrimaryColor ] = useState < MantineTheme [ 'primaryColor' ] > ( 'red' ) ;
const [ secondaryColor , setSecondaryColor ] = useState < MantineTheme [ 'primaryColor' ] > ( 'orange' ) ;
const [ primaryShade , setPrimaryShade ] = useState < MantineTheme [ 'primaryShade' ] > ( 6 ) ;
2022-06-08 14:58:32 +00:00
const colorTheme = {
primaryColor ,
secondaryColor ,
setPrimaryColor ,
setSecondaryColor ,
2022-06-08 15:36:54 +00:00
primaryShade ,
setPrimaryShade ,
2022-06-08 14:58:32 +00:00
} ;
2022-11-12 22:26:45 +09:00
// hook will return either 'dark' or 'light' on client
// and always 'light' during ssr as window.matchMedia is not available
2023-03-18 12:29:39 +01:00
const preferredColorScheme = useColorScheme ( props . defaultColorScheme ) ;
2022-11-12 22:26:45 +09:00
const [ colorScheme , setColorScheme ] = useLocalStorage < ColorScheme > ( {
key : 'mantine-color-scheme' ,
defaultValue : preferredColorScheme ,
getInitialValueInEffect : true ,
} ) ;
2023-01-31 21:17:37 +01:00
const { setInitialPackageAttributes } = usePackageAttributesStore ( ) ;
2023-02-22 21:59:49 +01:00
const { setDisabled } = useEditModeInformationStore ( ) ;
2023-01-31 21:17:37 +01:00
useEffect ( ( ) = > {
setInitialPackageAttributes ( props . packageAttributes ) ;
2023-02-22 21:59:49 +01:00
if ( ! props . editModeEnabled ) {
setDisabled ( ) ;
}
2023-01-31 21:17:37 +01:00
} , [ ] ) ;
2022-11-12 22:26:45 +09:00
const toggleColorScheme = ( value? : ColorScheme ) = >
setColorScheme ( value || ( colorScheme === 'dark' ? 'light' : 'dark' ) ) ;
2023-04-05 15:23:37 +09:00
const asyncStoragePersister = createAsyncStoragePersister ( {
storage : AsyncStorage ,
} ) ;
2022-05-15 12:42:53 +02:00
useHotkeys ( [ [ 'mod+J' , ( ) = > toggleColorScheme ( ) ] ] ) ;
2022-04-24 22:36:47 +02:00
return (
< >
< Head >
2023-02-01 11:06:24 +09:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" / >
2022-04-24 22:36:47 +02:00
< / Head >
2023-04-05 15:23:37 +09:00
< PersistQueryClientProvider
client = { queryClient }
persistOptions = { { persister : asyncStoragePersister } }
>
2022-08-26 16:12:40 +02:00
< ColorSchemeProvider colorScheme = { colorScheme } toggleColorScheme = { toggleColorScheme } >
< ColorTheme.Provider value = { colorTheme } >
< MantineProvider
theme = { {
. . . theme ,
components : {
Checkbox : {
styles : {
input : { cursor : 'pointer' } ,
label : { cursor : 'pointer' } ,
} ,
2022-08-08 15:43:04 +02:00
} ,
2022-08-26 16:12:40 +02:00
Switch : {
styles : {
input : { cursor : 'pointer' } ,
label : { cursor : 'pointer' } ,
} ,
2022-08-08 15:43:04 +02:00
} ,
} ,
2022-08-26 16:12:40 +02:00
primaryColor ,
primaryShade ,
colorScheme ,
} }
withGlobalStyles
withNormalizeCSS
>
2022-12-10 22:14:31 +01:00
< ConfigProvider >
2023-03-03 00:37:22 +09:00
< Notifications limit = { 4 } position = "bottom-left" / >
< ModalsProvider
modals = { {
editApp : EditAppModal ,
selectElement : SelectElementModal ,
integrationOptions : WidgetsEditModal ,
integrationRemove : WidgetsRemoveModal ,
categoryEditModal : CategoryEditModal ,
changeAppPositionModal : ChangeAppPositionModal ,
changeIntegrationPositionModal : ChangeWidgetPositionModal ,
} }
>
< Component { ...pageProps } / >
< / ModalsProvider >
2022-12-10 22:14:31 +01:00
< / ConfigProvider >
2022-08-26 16:12:40 +02:00
< / MantineProvider >
< / ColorTheme.Provider >
< / ColorSchemeProvider >
2023-01-31 10:10:02 +09:00
< ReactQueryDevtools initialIsOpen = { false } / >
2023-04-05 15:23:37 +09:00
< / PersistQueryClientProvider >
2022-04-24 22:36:47 +02:00
< / >
) ;
}
2023-02-22 21:59:49 +01:00
App . getInitialProps = ( { ctx } : { ctx : GetServerSidePropsContext } ) = > {
const disableEditMode =
process . env . DISABLE_EDIT_MODE && process . env . DISABLE_EDIT_MODE . toLowerCase ( ) === 'true' ;
if ( disableEditMode ) {
Consola . warn (
'EXPERIMENTAL: You have disabled the edit mode. Modifications are no longer possible and any requests on the API will be dropped. If you want to disable this, unset the DISABLE_EDIT_MODE environment variable. This behaviour may be removed in future versions of Homarr'
) ;
}
2023-03-18 12:29:39 +01:00
if ( process . env . DEFAULT_COLOR_SCHEME !== undefined ) {
Consola . debug ( ` Overriding the default color scheme with ${ process . env . DEFAULT_COLOR_SCHEME } ` ) ;
}
2023-03-28 07:05:26 +00:00
const colorScheme : ColorScheme = ( process . env . DEFAULT_COLOR_SCHEME as ColorScheme ) ? ? 'light' ;
2023-03-18 12:29:39 +01:00
2023-02-22 21:59:49 +01:00
return {
colorScheme : getCookie ( 'color-scheme' , ctx ) || 'light' ,
packageAttributes : getServiceSidePackageAttributes ( ) ,
editModeEnabled : ! disableEditMode ,
2023-03-18 12:29:39 +01:00
defaultColorScheme : colorScheme ,
2023-02-22 21:59:49 +01:00
} ;
} ;
2022-08-22 09:50:54 +02:00
export default appWithTranslation ( App ) ;
