✨ Widget menu in error boundary (#979)

public/locales/en/widgets/error-boundary.json

@@ -7,7 +7,7 @@
     }
   },
   "modal": {
-    "text": "",
+    "text": "An unexpected error has occurred. Please check your configuration. Please report this issue, if you believe that this is a bug.",
     "label": "Your error",
     "reportButton": "Report this error"
   }

src/components/Dashboard/Tiles/GenericTileMenu.tsx

@@ -26,7 +26,15 @@ export const GenericTileMenu = ({
   return (
     <Menu withinPortal withArrow position="right">
       <Menu.Target>
-        <ActionIcon size="md" radius="md" variant="light" pos="absolute" top={8} right={8}>
+        <ActionIcon
+          size="md"
+          radius="md"
+          variant="light"
+          pos="absolute"
+          top={8}
+          right={8}
+          style={{ zIndex: 1 }}
+        >
           <IconDots />
         </ActionIcon>
       </Menu.Target>

src/widgets/WidgetWrapper.tsx

@@ -39,7 +39,7 @@ export const WidgetWrapper = ({
   const widgetWithDefaultProps = useWidget(widget);
 
   return (
-    <ErrorBoundary>
+    <ErrorBoundary integration={widgetType} widget={widgetWithDefaultProps}>
       <HomarrCardWrapper className={className}>
         <WidgetsMenu integration={widgetType} widget={widgetWithDefaultProps} />
         <WidgetComponent widget={widgetWithDefaultProps} />

src/widgets/boundary.tsx

@@ -2,8 +2,10 @@ import Consola from 'consola';
 import React, { ReactNode } from 'react';
 import { openModal } from '@mantine/modals';
 import { withTranslation } from 'next-i18next';
-import { Button, Card, Center, Code, Group, Stack, Text, Title } from '@mantine/core';
+import { Button, Card, Center, Code, Group, ScrollArea, Stack, Text, Title } from '@mantine/core';
 import { IconBrandGithub, IconBug, IconInfoCircle, IconRefresh } from '@tabler/icons-react';
+import { WidgetsMenu } from '../components/Dashboard/Tiles/Widgets/WidgetsMenu';
+import { IWidget } from './widgets';
 
 type ErrorBoundaryState = {
   hasError: boolean;
@@ -13,6 +15,8 @@ type ErrorBoundaryState = {
 type ErrorBoundaryProps = {
   t: (key: string) => string;
   children: ReactNode;
+  integration: string;
+  widget: IWidget<string, any>;
 };
 
 /**
@@ -48,12 +52,15 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
           radius="lg"
           shadow="sm"
           withBorder
+          h="calc(100% - 20px)"
         >
+          <WidgetsMenu integration={this.props.integration} widget={this.props.widget} />
+          <ScrollArea h="100%" type="auto" offsetScrollbars>
             <Center>
-            <Stack align="center">
+              <Stack align="center" spacing="xs">
                 <IconBug color="white" />
                 <Stack spacing={0} align="center">
-                <Title order={4} color="white" align="center">
+                  <Title order={5} color="white" align="center">
                     {this.props.t('card.title')}
                   </Title>
                   {this.state.error && (
@@ -62,7 +69,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
                     </Text>
                   )}
                 </Stack>
-              <Group>
+                <Group spacing="xs">
                   <Button
                     onClick={() =>
                       openModal({
@@ -115,6 +122,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
                 </Group>
               </Stack>
             </Center>
+          </ScrollArea>
         </Card>
       );
     }

src/widgets/date/DateTile.tsx

@@ -34,7 +34,7 @@ interface DateTileProps {
 function DateTile({ widget }: DateTileProps) {
   const date = useDateState();
   const formatString = widget.properties.display24HourFormat ? 'HH:mm' : 'h:mm A';
-  const { width, height, ref } = useElementSize();
+  const { width, ref } = useElementSize();
 
   return (
     <Stack ref={ref} spacing="xs" justify="space-around" align="center" style={{ height: '100%' }}>