Merge branch 'dev' of https://github.com/ajnart/homarr into widget-full-translation-support

2023-08-13 17:46:18 +02:00
parent 9b2fecdfcb daa5ca29f9
commit d4c9a5bb26
189 changed files with 3599 additions and 2022 deletions
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -109,57 +109,52 @@ function App(
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      </Head>
-      <PersistQueryClientProvider
-        client={queryClient}
-        persistOptions={{ persister: asyncStoragePersister }}
-      >
-        <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-          <ColorTheme.Provider value={colorTheme}>
-            <MantineProvider
-              theme={{
-                ...theme,
-                components: {
-                  Checkbox: {
-                    styles: {
-                      input: { cursor: 'pointer' },
-                      label: { cursor: 'pointer' },
-                    },
-                  },
-                  Switch: {
-                    styles: {
-                      input: { cursor: 'pointer' },
-                      label: { cursor: 'pointer' },
-                    },
+      <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
+        <ColorTheme.Provider value={colorTheme}>
+          <MantineProvider
+            theme={{
+              ...theme,
+              components: {
+                Checkbox: {
+                  styles: {
+                    input: { cursor: 'pointer' },
+                    label: { cursor: 'pointer' },
                  },
                },
-                primaryColor,
-                primaryShade,
-                colorScheme,
-              }}
-              withGlobalStyles
-              withNormalizeCSS
-            >
-              <ConfigProvider {...props.pageProps}>
-                <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>
-              </ConfigProvider>
-            </MantineProvider>
-          </ColorTheme.Provider>
-        </ColorSchemeProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
-      </PersistQueryClientProvider>
+                Switch: {
+                  styles: {
+                    input: { cursor: 'pointer' },
+                    label: { cursor: 'pointer' },
+                  },
+                },
+              },
+              primaryColor,
+              primaryShade,
+              colorScheme,
+            }}
+            withGlobalStyles
+            withNormalizeCSS
+          >
+            <ConfigProvider {...props.pageProps}>
+              <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>
+            </ConfigProvider>
+          </MantineProvider>
+        </ColorTheme.Provider>
+      </ColorSchemeProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
    </>
  );
 }
--- a/src/pages/_error.tsx
+++ b/src/pages/_error.tsx
@@ -0,0 +1,83 @@
+import {
+  Accordion,
+  Center,
+  Group,
+  Stack,
+  Text,
+  Title,
+  createStyles,
+  useMantineTheme,
+} from '@mantine/core';
+import { IconDeviceDesktop, IconInfoCircle, IconServer } from '@tabler/icons-react';
+import { NextPageContext } from 'next';
+import Head from 'next/head';
+import Image from 'next/image';
+import imageBugFixing from '~/images/undraw_bug_fixing_oc-7-a.svg';
+
+function Error({ statusCode }: { statusCode: number }) {
+  const { classes } = useStyles();
+  const theme = useMantineTheme();
+  const getColor = (color: string) => theme.colors[color][theme.colorScheme === 'dark' ? 5 : 7];
+  return (
+    <Center className={classes.root} h="100dvh" maw={400}>
+      <Head>
+        <title>An error occurred • Homarr</title>
+      </Head>
+      <Stack>
+        <Image className={classes.image} src={imageBugFixing} alt="bug illustration" />
+        <Title>An unexpected error has occurred</Title>
+        <Text>
+          This page has crashed unexpectedly. We're sorry for the inconvenience. Please try again or
+          contact an administrator
+        </Text>
+
+        <Accordion variant="contained">
+          <Accordion.Item value="detailed">
+            <Accordion.Control icon={<IconInfoCircle color={getColor('red')} size="1rem" />}>
+              Detailed error information
+            </Accordion.Control>
+            <Accordion.Panel>
+              <Stack spacing="xs">
+                <Group position="apart">
+                  <Text fw="bold">Type</Text>
+                  <Text>
+                    {statusCode ? (
+                      <Group spacing="xs">
+                        <IconServer size="1rem" />
+                        <Text>Server side</Text>
+                      </Group>
+                    ) : (
+                      <Group spacing="xs">
+                        <IconDeviceDesktop size="1rem" />
+                        <Text>Client side</Text>
+                      </Group>
+                    )}
+                  </Text>
+                </Group>
+              </Stack>
+            </Accordion.Panel>
+          </Accordion.Item>
+        </Accordion>
+      </Stack>
+    </Center>
+  );
+}
+
+Error.getInitialProps = ({ res, err }: NextPageContext) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+  return { statusCode };
+};
+
+const useStyles = createStyles(() => ({
+  root: {
+    margin: '0 auto',
+  },
+  image: {
+    maxWidth: 400,
+    maxHeight: 200,
+    display: 'block',
+    margin: '0 auto',
+  },
+}));
+
+export default Error;