✨ Add mantine context modals

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

@@ -0,0 +1,31 @@
+import { ActionIcon, Tooltip } from '@mantine/core';
+import { openContextModal } from '@mantine/modals';
+import { IconApps } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import { v4 as uuidv4 } from 'uuid';
+import { openContextModalGeneric } from '../../../../../tools/mantineModalManagerExtensions';
+import { ServiceType } from '../../../../../types/service';
+
+export const AddElementAction = () => {
+  const { t } = useTranslation('layout/add-service-app-shelf');
+
+  return (
+    <Tooltip withinPortal label={t('actionIcon.tooltip')}>
+      <ActionIcon
+        variant="default"
+        radius="md"
+        size="xl"
+        color="blue"
+        onClick={() =>
+          openContextModal({
+            modal: 'selectElement',
+            title: 'Add an element to your dashboard',
+            innerProps: {},
+          })
+        }
+      >
+        <IconApps />
+      </ActionIcon>
+    </Tooltip>
+  );
+};

src/components/layout/header/Header.tsx

@@ -8,6 +8,7 @@ import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
 import { SettingsMenu } from './SettingsMenu';
 import { ToolsMenu } from './ToolsMenu';
+import { AddElementAction } from './Actions/AddElementAction/AddElementAction';
 
 export const HeaderHeight = 64;
 
@@ -24,6 +25,7 @@ export function Header(props: any) {
         <Group position="right" noWrap>
           <Search />
           <AddItemShelfButton />
+          <AddElementAction />
           <ToolsMenu />
           <SettingsMenu />
         </Group>