💄 Improve edit mode UX

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

@@ -1,29 +1,59 @@
-import { ActionIcon, Tooltip } from '@mantine/core';
+import { ActionIcon, Button, Tooltip } from '@mantine/core';
 import { openContextModal } from '@mantine/modals';
 import { IconApps } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 
-export const AddElementAction = () => {
+interface AddElementActionProps {
+  type: 'action-icon' | 'button';
+}
+
+export const AddElementAction = ({ type }: AddElementActionProps) => {
   const { t } = useTranslation('layout/element-selector/selector');
 
-  return (
-    <Tooltip withinPortal label={t('actionIcon.tooltip')}>
-      <ActionIcon
-        variant="default"
-        radius="md"
-        size="xl"
-        color="blue"
-        onClick={() =>
-          openContextModal({
-            modal: 'selectElement',
-            title: t('modal.title'),
-            size: 'xl',
-            innerProps: {},
-          })
-        }
-      >
-        <IconApps />
-      </ActionIcon>
-    </Tooltip>
-  );
+  switch (type) {
+    case 'button':
+      return (
+        <Tooltip label={t('actionIcon.tooltip')} withinPortal withArrow>
+          <Button
+            variant="default"
+            radius="md"
+            color="blue"
+            style={{ height: 43 }}
+            onClick={() =>
+              openContextModal({
+                modal: 'selectElement',
+                title: t('modal.title'),
+                size: 'xl',
+                innerProps: {},
+              })
+            }
+          >
+            <IconApps />
+          </Button>
+        </Tooltip>
+      );
+    case 'action-icon':
+      return (
+        <Tooltip label={t('actionIcon.tooltip')} withinPortal withArrow>
+          <ActionIcon
+            variant="default"
+            radius="md"
+            size="xl"
+            color="blue"
+            onClick={() =>
+              openContextModal({
+                modal: 'selectElement',
+                title: t('modal.title'),
+                size: 'xl',
+                innerProps: {},
+              })
+            }
+          >
+            <IconApps />
+          </ActionIcon>
+        </Tooltip>
+      );
+    default:
+      return null;
+  }
 };

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

@@ -1,7 +1,7 @@
-import { ActionIcon, Button, Popover, Text, Tooltip } from '@mantine/core';
-import { IconEditCircle, IconEditCircleOff, IconX } from '@tabler/icons';
 import axios from 'axios';
 import Consola from 'consola';
+import { ActionIcon, Button, Group, Popover, Stack, Text, Tooltip } from '@mantine/core';
+import { IconEditCircle, IconEditCircleOff, IconX } from '@tabler/icons';
 import { getCookie } from 'cookies-next';
 import { Trans, useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
@@ -9,6 +9,7 @@ import { useConfigContext } from '../../../../../config/provider';
 import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan';
 
 import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
+import { AddElementAction } from '../AddElementAction/AddElementAction';
 
 export const ToggleEditModeAction = () => {
   const { enabled, toggleEditMode } = useEditModeStore();
@@ -32,33 +33,59 @@ export const ToggleEditModeAction = () => {
     setPopoverManuallyHidden(false);
   };
 
+  const ToggleButtonDesktop = () => (
+    <Button
+      onClick={() => toggleButtonClicked()}
+      leftIcon={enabled ? <IconEditCircleOff /> : <IconEditCircle />}
+      variant="default"
+      radius="md"
+      color="blue"
+      style={{ height: 43 }}
+    >
+      <Text>{enabled ? t('button.enabled') : t('button.disabled')}</Text>
+    </Button>
+  );
+
+  const ToggleActionIconMobile = () => (
+    <ActionIcon
+      onClick={() => toggleButtonClicked()}
+      variant="default"
+      radius="md"
+      size="xl"
+      color="blue"
+    >
+      {enabled ? <IconEditCircleOff /> : <IconEditCircle />}
+    </ActionIcon>
+  );
+
   return (
     <Tooltip label={t('tooltip')} withinPortal>
-      <Popover opened={enabled && !smallerThanSm && !popoverManuallyHidden} width={250} withArrow>
+      <Popover
+        opened={enabled && !smallerThanSm && !popoverManuallyHidden}
+        width={250}
+        zIndex={199}
+        withArrow
+      >
         <Popover.Target>
           {smallerThanSm ? (
-            <ActionIcon
-              onClick={() => toggleButtonClicked()}
-              variant="default"
-              radius="md"
-              size="xl"
-              color="blue"
-            >
-              {enabled ? <IconEditCircleOff /> : <IconEditCircle />}
-            </ActionIcon>
+            enabled ? (
+              <Group style={{ flexWrap: 'nowrap' }}>
+                <AddElementAction type="action-icon" />
+                <ToggleActionIconMobile />
+              </Group>
+            ) : (
+              <ToggleActionIconMobile />
+            )
+          ) : enabled ? (
+            <Button.Group>
+              <ToggleButtonDesktop />
+              {enabled && <AddElementAction type="button" />}
+            </Button.Group>
           ) : (
-            <Button
-              onClick={() => toggleButtonClicked()}
-              leftIcon={enabled ? <IconEditCircleOff /> : <IconEditCircle />}
-              variant="default"
-              radius="md"
-              color="blue"
-              style={{ height: 44 }}
-            >
-              <Text>{enabled ? t('button.enabled') : t('button.disabled')}</Text>
-            </Button>
+            <ToggleButtonDesktop />
           )}
         </Popover.Target>
+
         <Popover.Dropdown p={4} px={6}>
           <div style={{ position: 'absolute', top: 2, right: 2 }}>
             <ActionIcon onClick={() => setPopoverManuallyHidden(true)}>

src/components/layout/header/Header.tsx

@@ -38,7 +38,6 @@ export function Header(props: any) {
         </Box>
         <Group position="right" style={{ maxWidth: 'none' }} noWrap>
           <Search />
-          <AddElementAction />
           <ToggleEditModeAction />
           <DockerMenuButton />
           <Indicator size={15} color="blue" withBorder processing disabled={!newVersionAvailable}>