🐛 Fix issue with creation of app / widget

src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx

@@ -14,6 +14,7 @@ import { useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { AppType } from '../../../../types/app';
+import { useEditModeStore } from '../../Views/useEditModeStore';
 import { AppearanceTab } from './Tabs/AppereanceTab/AppereanceTab';
 import { BehaviourTab } from './Tabs/BehaviourTab/BehaviourTab';
 import { GeneralTab } from './Tabs/GeneralTab/GeneralTab';
@@ -33,6 +34,7 @@ export const EditAppModal = ({
   const { t } = useTranslation(['layout/modals/add-app', 'common']);
   const { name: configName, config } = useConfigContext();
   const updateConfig = useConfigStore((store) => store.updateConfig);
+  const { enabled: isEditMode } = useEditModeStore();
   const [allowAppNamePropagation, setAllowAppNamePropagation] = useState<boolean>(
     innerProps.allowAppNamePropagation
   );
@@ -87,9 +89,15 @@ export const EditAppModal = ({
       configName,
       (previousConfig) => ({
         ...previousConfig,
-        apps: [...previousConfig.apps.filter((x) => x.id !== form.values.id), form.values],
+        apps: [
+          ...previousConfig.apps.filter((x) => x.id !== values.id),
+          {
+            ...values,
+          },
+        ],
       }),
-      true
+      true,
+      !isEditMode
     );
 
     // also close the parent modal

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -3,8 +3,10 @@ import { IconBox, IconStack } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+import { useConfigContext } from '../../../../../../config/provider';
 import { openContextModalGeneric } from '../../../../../../tools/mantineModalManagerExtensions';
 import { AppType } from '../../../../../../types/app';
+import { appTileDefinition } from '../../../../Tiles/Apps/AppTile';
 import { useStyles } from '../Shared/styles';
 
 interface AvailableElementTypesProps {
@@ -17,6 +19,8 @@ export const AvailableElementTypes = ({
   onOpenStaticElements,
 }: AvailableElementTypesProps) => {
   const { t } = useTranslation('layout/element-selector/selector');
+  const { config } = useConfigContext();
+  const getLowestWrapper = () => config?.wrappers.sort((a, b) => a.position - b.position)[0];
 
   return (
     <>
@@ -45,10 +49,11 @@ export const AvailableElementTypes = ({
                     isOpeningNewTab: true,
                     externalUrl: '',
                   },
+
                   area: {
-                    type: 'sidebar',
+                    type: 'wrapper',
                     properties: {
-                      location: 'right',
+                      id: getLowestWrapper()?.id ?? '',
                     },
                   },
                   shape: {
@@ -57,8 +62,8 @@ export const AvailableElementTypes = ({
                       y: 0,
                     },
                     size: {
-                      height: 1,
-                      width: 1,
+                      width: appTileDefinition.minWidth,
+                      height: appTileDefinition.minHeight,
                     },
                   },
                   integration: {

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../../../../config/provider';
 import { useConfigStore } from '../../../../../../config/store';
 import { IWidget, IWidgetDefinition } from '../../../../../../widgets/widgets';
+import { useEditModeStore } from '../../../../Views/useEditModeStore';
 import { GenericAvailableElementType } from '../Shared/GenericElementType';
 
 interface WidgetElementTypeProps {
@@ -18,6 +19,7 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
   const { t } = useTranslation(`modules/${id}`);
   const { name: configName, config } = useConfigContext();
   const updateConfig = useConfigStore((x) => x.updateConfig);
+  const isEditMode = useEditModeStore((x) => x.enabled);
 
   if (!configName) return null;
 
@@ -56,9 +58,10 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
           },
         ],
       }),
-      true
+      true,
+      !isEditMode
     );
-    // TODO: safe to file system
+
     closeModal('selectElement');
   };