import { ColorScheme, ColorSchemeProvider, MantineProvider, MantineTheme } from '@mantine/core'; import { useColorScheme, useHotkeys, useLocalStorage } from '@mantine/hooks'; import { ModalsProvider } from '@mantine/modals'; import Consola from 'consola'; import { NotificationsProvider } from '@mantine/notifications'; import { QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { getCookie } from 'cookies-next'; import { GetServerSidePropsContext } from 'next'; import { appWithTranslation } from 'next-i18next'; import { AppProps } from 'next/app'; import Head from 'next/head'; import { useEffect, useState } from 'react'; import 'video.js/dist/video-js.css'; import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal'; import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal'; import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal'; import { SelectElementModal } from '../components/Dashboard/Modals/SelectElement/SelectElementModal'; import { WidgetsEditModal } from '../components/Dashboard/Tiles/Widgets/WidgetsEditModal'; import { WidgetsRemoveModal } from '../components/Dashboard/Tiles/Widgets/WidgetsRemoveModal'; import { CategoryEditModal } from '../components/Dashboard/Wrappers/Category/CategoryEditModal'; import { ConfigProvider } from '../config/provider'; import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAttributesStore'; import { ColorTheme } from '../tools/color'; import { queryClient } from '../tools/queryClient'; import { getServiceSidePackageAttributes, ServerSidePackageAttributesType, } from '../tools/server/getPackageVersion'; import { theme } from '../tools/theme'; import { useEditModeInformationStore } from '../hooks/useEditModeInformation'; import '../styles/global.scss'; function App( this: any, props: AppProps & { colorScheme: ColorScheme; packageAttributes: ServerSidePackageAttributesType; editModeEnabled: boolean; } ) { const { Component, pageProps } = props; const [primaryColor, setPrimaryColor] = useState('red'); const [secondaryColor, setSecondaryColor] = useState('orange'); const [primaryShade, setPrimaryShade] = useState(6); const colorTheme = { primaryColor, secondaryColor, setPrimaryColor, setSecondaryColor, primaryShade, setPrimaryShade, }; // hook will return either 'dark' or 'light' on client // and always 'light' during ssr as window.matchMedia is not available const preferredColorScheme = useColorScheme(); const [colorScheme, setColorScheme] = useLocalStorage({ key: 'mantine-color-scheme', defaultValue: preferredColorScheme, getInitialValueInEffect: true, }); const { setInitialPackageAttributes } = usePackageAttributesStore(); const { setDisabled } = useEditModeInformationStore(); useEffect(() => { setInitialPackageAttributes(props.packageAttributes); if (!props.editModeEnabled) { setDisabled(); } }, []); const toggleColorScheme = (value?: ColorScheme) => setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark')); useHotkeys([['mod+J', () => toggleColorScheme()]]); return ( <> ); } 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' ); } return { colorScheme: getCookie('color-scheme', ctx) || 'light', packageAttributes: getServiceSidePackageAttributes(), editModeEnabled: !disableEditMode, }; }; export default appWithTranslation(App);