Add translations for en & de in Dashdot; Fix PR comments

src/components/Dashboard/Tiles/Widgets/DraggableList.tsx

@@ -1,7 +1,8 @@
 import { Collapse, createStyles, Stack, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { IconChevronDown, IconGripVertical } from '@tabler/icons';
 import { Reorder, useDragControls } from 'framer-motion';
-import { FC, ReactNode, useState } from 'react';
+import { FC, ReactNode } from 'react';
 import { IDraggableListInputValue } from '../../../../widgets/widgets';
 
 const useStyles = createStyles((theme) => ({
@@ -14,7 +15,6 @@ const useStyles = createStyles((theme) => ({
     }`,
     backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
     marginBottom: theme.spacing.xs,
-    gap: theme.spacing.xs,
   },
   row: {
     display: 'flex',
@@ -80,7 +80,7 @@ const ListItem: FC<{
   const { classes, cx } = useStyles();
   const controls = useDragControls();
 
-  const [showContent, setShowContent] = useState(false);
+  const [opened, handlers] = useDisclosure(false);
   const hasContent = props.children != null && Object.keys(props.children).length !== 0;
 
   return (
@@ -100,8 +100,8 @@ const ListItem: FC<{
 
           {hasContent && (
             <IconChevronDown
-              className={cx(classes.clickableIcons, { [classes.rotate]: showContent })}
-              onClick={() => setShowContent(!showContent)}
+              className={cx(classes.clickableIcons, { [classes.rotate]: opened })}
+              onClick={() => handlers.toggle()}
               size={18}
               stroke={1.5}
             />
@@ -109,7 +109,7 @@ const ListItem: FC<{
         </div>
 
         {hasContent && (
-          <Collapse in={showContent}>
+          <Collapse in={opened}>
             <Stack className={classes.collapseContent}>{props.children}</Stack>
           </Collapse>
         )}

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -205,7 +205,7 @@ const WidgetOptionTypeSwitch: FC<{
             labels={Object.fromEntries(
               Object.entries(option.items).map(([graphName]) => [
                 graphName,
-                t(`descriptor.settings.${graphName}.label`),
+                t(`descriptor.settings.${key}.${graphName}.label`),
               ])
             )}
           >
@@ -217,7 +217,7 @@ const WidgetOptionTypeSwitch: FC<{
                     key={`${graphName}.${subKey}.${i}`}
                     option={setting as IWidgetOptionValue}
                     widgetId={widgetId}
-                    propName={`${graphName}.${subKey}`}
+                    propName={`${key}.${graphName}.${subKey}`}
                     value={typedVal.find((v) => v.key === graphName)?.subValues?.[subKey]}
                     handleChange={(_, newVal) =>
                       handleChange(

src/widgets/dashDot/DashDotGraph.tsx

@@ -1,4 +1,5 @@
 import { createStyles, Title, useMantineTheme } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
 import { DashDotCompactStorage } from './DashDotCompactStorage';
 
@@ -21,21 +22,28 @@ export const DashDotGraph = ({
   usePercentages,
   info,
 }: DashDotGraphProps) => {
+  const { t } = useTranslation('modules/dashdot');
   const { classes } = useStyles();
 
-  return graph === 'storage' && isCompact ? (
-    <DashDotCompactStorage info={info} />
-  ) : graph === 'network' && isCompact ? (
-    <DashDotCompactNetwork info={info} />
-  ) : (
+  if (graph === 'storage' && isCompact) {
+    return <DashDotCompactStorage info={info} />;
+  }
+
+  if (graph === 'network' && isCompact) {
+    return <DashDotCompactNetwork info={info} />;
+  }
+
+  const title = t(`card.graphs.${graph}.title`);
+
+  return (
     <div className={classes.graphContainer}>
       <Title className={classes.graphTitle} order={4}>
-        {graph}
+        {title}
       </Title>
       <iframe
         className={classes.iframe}
         key={graph}
-        title={graph}
+        title={title}
         src={useIframeSrc(dashDotUrl, graph, multiView, usePercentages)}
         style={{
           height: `${graphHeight}px`,