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';
|
2022-12-04 17:36:30 +01:00
|
|
|
import { NotificationsProvider } from '@mantine/notifications';
|
2022-08-26 16:12:40 +02:00
|
|
|
import { QueryClientProvider } from '@tanstack/react-query';
|
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-01-31 10:10:02 +09:00
|
|
|
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
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';
|
2022-12-11 13:12:39 +01:00
|
|
|
import '../styles/global.scss';
|
2022-06-08 14:58:32 +00:00
|
|
|
import { ColorTheme } from '../tools/color';
|
2022-08-26 16:12:40 +02:00
|
|
|
import { queryClient } from '../tools/queryClient';
|
2022-12-04 17:36:30 +01:00
|
|
|
import { theme } from '../tools/theme';
|
2023-01-31 21:17:37 +01:00
|
|
|
import {
|
|
|
|
|
getServiceSidePackageAttributes,
|
|
|
|
|
ServerSidePackageAttributesType,
|
|
|
|
|
} from '../tools/server/getPackageVersion';
|
|
|
|
|
import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAttributesStore';
|
2022-04-24 22:36:47 +02:00
|
|
|
|
2023-01-31 21:17:37 +01:00
|
|
|
function App(
|
|
|
|
|
this: any,
|
|
|
|
|
props: AppProps & { colorScheme: ColorScheme; packageAttributes: ServerSidePackageAttributesType }
|
|
|
|
|
) {
|
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
|
|
|
|
|
const preferredColorScheme = useColorScheme();
|
|
|
|
|
const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
|
|
|
|
|
key: 'mantine-color-scheme',
|
|
|
|
|
defaultValue: preferredColorScheme,
|
|
|
|
|
getInitialValueInEffect: true,
|
|
|
|
|
});
|
|
|
|
|
|
2023-01-31 21:17:37 +01:00
|
|
|
const { setInitialPackageAttributes } = usePackageAttributesStore();
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setInitialPackageAttributes(props.packageAttributes);
|
|
|
|
|
}, []);
|
|
|
|
|
|
2022-11-12 22:26:45 +09:00
|
|
|
const toggleColorScheme = (value?: ColorScheme) =>
|
|
|
|
|
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
|
|
|
|
|
|
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:04:15 +09:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
2022-04-24 22:36:47 +02:00
|
|
|
</Head>
|
2022-08-26 16:12:40 +02:00
|
|
|
<QueryClientProvider client={queryClient}>
|
|
|
|
|
<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>
|
|
|
|
|
<NotificationsProvider limit={4} position="bottom-left">
|
|
|
|
|
<ModalsProvider
|
|
|
|
|
modals={{
|
2022-12-18 22:27:01 +01:00
|
|
|
editApp: EditAppModal,
|
2022-12-10 22:14:31 +01:00
|
|
|
selectElement: SelectElementModal,
|
2022-12-16 21:01:06 +01:00
|
|
|
integrationOptions: WidgetsEditModal,
|
|
|
|
|
integrationRemove: WidgetsRemoveModal,
|
2022-12-10 22:14:31 +01:00
|
|
|
categoryEditModal: CategoryEditModal,
|
2022-12-18 22:27:01 +01:00
|
|
|
changeAppPositionModal: ChangeAppPositionModal,
|
2022-12-19 19:55:42 +01:00
|
|
|
changeIntegrationPositionModal: ChangeWidgetPositionModal,
|
2022-12-10 22:14:31 +01:00
|
|
|
}}
|
|
|
|
|
>
|
2022-08-26 16:12:40 +02:00
|
|
|
<Component {...pageProps} />
|
2022-12-10 22:14:31 +01:00
|
|
|
</ModalsProvider>
|
|
|
|
|
</NotificationsProvider>
|
|
|
|
|
</ConfigProvider>
|
2022-08-26 16:12:40 +02:00
|
|
|
</MantineProvider>
|
|
|
|
|
</ColorTheme.Provider>
|
|
|
|
|
</ColorSchemeProvider>
|
2023-01-31 10:10:02 +09:00
|
|
|
<ReactQueryDevtools initialIsOpen={false} />
|
2022-08-26 16:12:40 +02:00
|
|
|
</QueryClientProvider>
|
2022-04-24 22:36:47 +02:00
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
|
2022-05-12 19:28:10 +02:00
|
|
|
colorScheme: getCookie('color-scheme', ctx) || 'light',
|
2023-01-31 21:17:37 +01:00
|
|
|
packageAttributes: getServiceSidePackageAttributes(),
|
2022-04-24 22:36:47 +02:00
|
|
|
});
|
2022-08-22 09:50:54 +02:00
|
|
|
|
|
|
|
|
export default appWithTranslation(App);
|
