From e41f63345c1d9b71c4806a2af41bb4b9985abeef Mon Sep 17 00:00:00 2001
From: Manuel Ruwe <manuel.ruwe@bluewin.ch>
Date: Wed, 11 Jan 2023 20:37:46 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=20Add=20screen=20size=20popover=20?=
 =?UTF-8?q?in=20edit=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en/layout/screen-sizes.json    | 11 ++++++
 public/locales/en/layout/tools.json           | 10 -----
 src/components/Dashboard/Views/EditView.tsx   | 39 ++++++++++++++++++-
 .../Dashboard/Wrappers/gridstack/store.tsx    | 21 ++++++++--
 src/tools/translation-namespaces.ts           |  1 +
 5 files changed, 67 insertions(+), 15 deletions(-)
 create mode 100644 public/locales/en/layout/screen-sizes.json
 delete mode 100644 public/locales/en/layout/tools.json

diff --git a/public/locales/en/layout/screen-sizes.json b/public/locales/en/layout/screen-sizes.json
new file mode 100644
index 000000000..cb0b0a5d3
--- /dev/null
+++ b/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"
+  }
+}
\ No newline at end of file
diff --git a/public/locales/en/layout/tools.json b/public/locales/en/layout/tools.json
deleted file mode 100644
index 4224b621e..000000000
--- a/public/locales/en/layout/tools.json
+++ /dev/null
@@ -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"
-    }
-}
\ No newline at end of file
diff --git a/src/components/Dashboard/Views/EditView.tsx b/src/components/Dashboard/Views/EditView.tsx
index 11b387d81..5812f0715 100644
--- a/src/components/Dashboard/Views/EditView.tsx
+++ b/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 />
+    </>
+  );
+};
diff --git a/src/components/Dashboard/Wrappers/gridstack/store.tsx b/src/components/Dashboard/Wrappers/gridstack/store.tsx
index 881c0ee39..6df8c2f75 100644
--- a/src/components/Dashboard/Wrappers/gridstack/store.tsx
+++ b/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) {
diff --git a/src/tools/translation-namespaces.ts b/src/tools/translation-namespaces.ts
index facb3cbd4..bf3e1d03e 100644
--- a/src/tools/translation-namespaces.ts
+++ b/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',