Refactor edit indicator

public/locales/en/layout/header/actions/toggle-edit-mode.json

@@ -5,7 +5,12 @@
         "enabled": "Exit and Save"
     },
     "popover": {
-        "title": "Edit mode is enabled",
+        "title": "Edit mode is enabled for  <1>{{size}}</1> size",
         "text": "You can adjust and configure your apps now. Changes are <strong>not saved</strong> until you exit edit mode"
+    },
+    "screenSizes": {
+        "small": "small",
+        "medium": "medium",
+        "large": "large"
     }
 }

public/locales/en/layout/screen-sizes.json

@@ -1,11 +0,0 @@
-{
-  "popover": {
-    "title": "Configuring for screen size \"{{size}}\"",
-    "description": "You are editing the size for your current screen"
-  },
-  "sizes": {
-    "small": "small",
-    "medium": "medium",
-    "large": "large"
-  }
-}

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 = () => {
+export const DashboardEditView = () => <DashboardView />;
-  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 />
-    </>
-  );
-};

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,
+        autoClose: 10000,
-        title: <Title order={4}>{t('popover.title')}</Title>,
+        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 {

src/pages/index.tsx

@@ -2,7 +2,6 @@ import { getCookie, setCookie } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
 
 import fs from 'fs';
-import Consola from 'consola';
 import { Dashboard } from '../components/Dashboard/Dashboard';
 import Layout from '../components/layout/Layout';
 import { useInitConfig } from '../config/init';

src/tools/translation-namespaces.ts

@@ -7,7 +7,6 @@ export const dashboardNamespaces = [
   'layout/modals/about',
   'layout/header/actions/toggle-edit-mode',
   'layout/mobile/drawer',
-  'layout/screen-sizes',
   'settings/common',
   'settings/general/theme-selector',
   'settings/general/config-changer',