Fixing console errors and adding category modal

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

@@ -23,7 +23,6 @@ export const AppearanceTab = ({
     <Tabs.Panel value="appearance" pt="lg">
       <Flex gap={5}>
         <TextInput
-          defaultValue={form.values.appearance.iconUrl}
           className={classes.textInput}
           icon={<DebouncedAppIcon form={form} width={20} height={20} />}
           label={t('appearance.icon.label')}

src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx

@@ -31,6 +31,8 @@ interface IconSelectorProps {
 }
 
 export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSelectorProps) => {
+  const { t } = useTranslation('layout/tools');
+
   const { data, isLoading } = useRepositoryIconsQuery<WalkxcodeRepositoryIcon>({
     url: 'https://api.github.com/repos/walkxcode/Dashboard-Icons/contents/png',
     converter: (item) => ({
@@ -73,8 +75,6 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe
   const isTruncated =
     slicedFilteredItems.length > 0 && slicedFilteredItems.length !== filteredItems.length;
 
-  const { t } = useTranslation('layout/tools');
-
   return (
     <Popover width={310}>
       <Popover.Target>

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

@@ -1,5 +1,6 @@
 import { Group, Space, Stack, Text, UnstyledButton } from '@mantine/core';
 import { closeModal } from '@mantine/modals';
+import { showNotification } from '@mantine/notifications';
 import { IconBox, IconBoxAlignTop, IconStack } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
@@ -9,6 +10,7 @@ import { useConfigStore } from '../../../../../../config/store';
 import { openContextModalGeneric } from '../../../../../../tools/mantineModalManagerExtensions';
 import { AppType } from '../../../../../../types/app';
 import { appTileDefinition } from '../../../../Tiles/Apps/AppTile';
+import { CategoryEditModalInnerProps } from '../../../../Wrappers/Category/CategoryEditModal';
 import { useStyles } from '../Shared/styles';
 
 interface AvailableElementTypesProps {
@@ -28,33 +30,50 @@ export const AvailableElementTypes = ({
   const getLowestWrapper = () => config?.wrappers.sort((a, b) => a.position - b.position)[0];
 
   const onClickCreateCategory = async () => {
-    if (!configName) {
-      return;
-    }
+    openContextModalGeneric<CategoryEditModalInnerProps>({
+      modal: 'categoryEditModal',
+      title: 'Name of new category',
+      withCloseButton: false,
+      innerProps: {
+        category: {
+          id: uuidv4(),
+          name: 'New category',
+          position: 0,
+        },
+        onSuccess: async (category) => {
+          if (!configName) return;
 
-    await updateConfig(configName, (previousConfig) => ({
-      ...previousConfig,
-      wrappers:
-        previousConfig.wrappers.length <= previousConfig.categories.length
-          ? [
-              ...previousConfig.wrappers,
+          await updateConfig(configName, (previousConfig) => ({
+            ...previousConfig,
+            wrappers:
+              previousConfig.wrappers.length <= previousConfig.categories.length
+                ? [
+                    ...previousConfig.wrappers,
+                    {
+                      id: uuidv4(),
+                      position: previousConfig.categories.length,
+                    },
+                  ]
+                : previousConfig.wrappers,
+            categories: [
+              ...previousConfig.categories,
               {
                 id: uuidv4(),
+                name: category.name,
                 position: previousConfig.categories.length,
               },
-            ]
-          : previousConfig.wrappers,
-      categories: [
-        ...previousConfig.categories,
-        {
-          id: uuidv4(),
-          name: `Category ${previousConfig.categories.length + 1}`,
-          position: previousConfig.categories.length,
+            ],
+          })).then(() => {
+            closeModal(modalId);
+            showNotification({
+              title: 'Category created',
+              message: `The category ${category.name} has been created`,
+              color: 'teal',
+            });
+          });
         },
-      ],
-    }));
-
-    closeModal(modalId);
+      },
+    });
   };
 
   return (