💄 Improve edit mode UX

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

@@ -1,13 +1,40 @@
-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');
 
+  switch (type) {
+    case 'button':
       return (
-    <Tooltip withinPortal label={t('actionIcon.tooltip')}>
+        <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"
@@ -26,4 +53,7 @@ export const AddElementAction = () => {
           </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,11 +33,20 @@ export const ToggleEditModeAction = () => {
     setPopoverManuallyHidden(false);
   };
 
-  return (
+  const ToggleButtonDesktop = () => (
-    <Tooltip label={t('tooltip')} withinPortal>
+    <Button
-      <Popover opened={enabled && !smallerThanSm && !popoverManuallyHidden} width={250} withArrow>
+      onClick={() => toggleButtonClicked()}
-        <Popover.Target>
+      leftIcon={enabled ? <IconEditCircleOff /> : <IconEditCircle />}
-          {smallerThanSm ? (
+      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"
@@ -46,19 +56,36 @@ export const ToggleEditModeAction = () => {
     >
       {enabled ? <IconEditCircleOff /> : <IconEditCircle />}
     </ActionIcon>
-          ) : (
+  );
-            <Button
+
-              onClick={() => toggleButtonClicked()}
+  return (
-              leftIcon={enabled ? <IconEditCircleOff /> : <IconEditCircle />}
+    <Tooltip label={t('tooltip')} withinPortal>
-              variant="default"
+      <Popover
-              radius="md"
+        opened={enabled && !smallerThanSm && !popoverManuallyHidden}
-              color="blue"
+        width={250}
-              style={{ height: 44 }}
+        zIndex={199}
+        withArrow
       >
-              <Text>{enabled ? t('button.enabled') : t('button.disabled')}</Text>
+        <Popover.Target>
-            </Button>
+          {smallerThanSm ? (
+            enabled ? (
+              <Group style={{ flexWrap: 'nowrap' }}>
+                <AddElementAction type="action-icon" />
+                <ToggleActionIconMobile />
+              </Group>
+            ) : (
+              <ToggleActionIconMobile />
+            )
+          ) : enabled ? (
+            <Button.Group>
+              <ToggleButtonDesktop />
+              {enabled && <AddElementAction type="button" />}
+            </Button.Group>
+          ) : (
+            <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}>