✨ Add screen size popover in edit mode

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

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

public/locales/en/layout/tools.json

@@ -1,10 +0,0 @@
-{
-    "fallback": {
-        "title": "You currently do not have any tools"
-    },
-    "iconPicker": {
-        "textInputPlaceholder": "Search for icons...",
-        "searchLimitationTitle": "Search is limited to {{max}} icons",
-        "searchLimitationMessage": "To keep things snappy and fast, the search is limited to {{max}} icons. Use the search box to find more icons"
-    }
-}

src/components/Dashboard/Views/EditView.tsx

@@ -1,3 +1,40 @@
+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 = () => <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">
+              <IconQuestionMark size={16} />
+            </ActionIcon>
+          </Group>
+          <Progress size="xl" value={widthInTotal} label={translatedSize} />
+        </Paper>
+      </Affix>
+      <DashboardView />
+    </>
+  );
+};

src/components/Dashboard/Wrappers/gridstack/store.tsx

@@ -14,16 +14,29 @@ interface GridstackStoreType {
   setMainAreaWidth: (width: number) => void;
 }
 
-export const useWrapperColumnCount = () => {
+export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | null => {
   const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
   const { sm, xl } = useMantineTheme().breakpoints;
   if (!mainAreaWidth) return null;
 
-  if (mainAreaWidth >= xl) return 12;
+  if (mainAreaWidth >= xl) return 'large';
 
-  if (mainAreaWidth >= sm) return 6;
+  if (mainAreaWidth >= sm) return 'medium';
 
-  return 3;
+  return 'small';
+};
+
+export const useWrapperColumnCount = () => {
+  switch (useNamedWrapperColumnCount()) {
+    case 'large':
+      return 12;
+    case 'medium':
+      return 6;
+    case 'small':
+      return 3;
+    default:
+      return null;
+  }
 };
 
 function getCurrentShapeSize(size: number) {

src/tools/translation-namespaces.ts

@@ -7,6 +7,7 @@ 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',