Refactor edit indicator

src/components/Dashboard/Views/EditView.tsx

@@ -1,45 +1,3 @@
-import { ActionIcon, Affix, Group, Paper, Progress, Stack, Text } from '@mantine/core';
-import { IconQuestionMark } from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
-import { useNamedWrapperColumnCount, useWrapperColumnCount } from '../Wrappers/gridstack/store';
 import { DashboardView } from './DashboardView';
 
-export const DashboardEditView = () => {
-  const wrapperColumnCount = useWrapperColumnCount();
-  const namedWrapperColumnCount = useNamedWrapperColumnCount();
-  const widthInTotal = ((wrapperColumnCount ?? 0) / 12) * 100;
-
-  const { t } = useTranslation('layout/screen-sizes');
-
-  const translatedSize = t(`sizes.${namedWrapperColumnCount}`);
-
-  return (
-    <>
-      <Affix position={{ bottom: 20, right: 20 }} style={{ width: 250 }} withinPortal>
-        <Paper p="sm" withBorder>
-          <Group position="apart" align="start">
-            <Stack spacing={0} mb="sm" style={{ maxWidth: 175 }}>
-              <Text size="xs" weight="bold">
-                {t('popover.title', { size: translatedSize })}
-              </Text>
-              <Text size="xs" color="dimmed">
-                {t('popover.description')}
-              </Text>
-            </Stack>
-
-            <ActionIcon
-              size="sm"
-              component="a"
-              href="https://homarr.dev/docs/customizations/layout"
-              target="_blank"
-            >
-              <IconQuestionMark size={16} />
-            </ActionIcon>
-          </Group>
-          <Progress size="xl" value={widthInTotal} label={translatedSize} />
-        </Paper>
-      </Affix>
-      <DashboardView />
-    </>
-  );
-};
+export const DashboardEditView = () => <DashboardView />;

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import Consola from 'consola';
-import { ActionIcon, Button, Group, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core';
 import { IconEditCircle, IconEditCircleOff } from '@tabler/icons';
 import { getCookie } from 'cookies-next';
 import { Trans, useTranslation } from 'next-i18next';
@@ -10,11 +10,13 @@ import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan'
 
 import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
 import { AddElementAction } from '../AddElementAction/AddElementAction';
+import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/gridstack/store';
 
 export const ToggleEditModeAction = () => {
   const { enabled, toggleEditMode } = useEditModeStore();
-
+  const namedWrapperColumnCount = useNamedWrapperColumnCount();
   const { t } = useTranslation('layout/header/actions/toggle-edit-mode');
+  const translatedSize = t(`screenSizes.${namedWrapperColumnCount}`);
 
   const smallerThanSm = useScreenSmallerThan('sm');
   const { config } = useConfigContext();
@@ -44,8 +46,25 @@ export const ToggleEditModeAction = () => {
         }),
         radius: 'md',
         id: 'toggle-edit-mode',
-        autoClose: false,
-        title: <Title order={4}>{t('popover.title')}</Title>,
+        autoClose: 10000,
+        title: (
+          <Title order={4}>
+            <Trans
+              i18nKey="layout/header/actions/toggle-edit-mode:popover.title"
+              values={{ size: translatedSize }}
+              components={{
+                1: (
+                  <Text
+                    component="a"
+                    style={{ color: 'inherit', textDecoration: 'underline' }}
+                    href="https://homarr.dev/docs/customizations/layout"
+                    target="_blank"
+                  />
+                ),
+              }}
+            />
+          </Title>
+        ),
         message: <Trans i18nKey="layout/header/actions/toggle-edit-mode:popover.text" />,
       });
     } else {