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,9 +30,18 @@ export const AvailableElementTypes = ({
   const getLowestWrapper = () => config?.wrappers.sort((a, b) => a.position - b.position)[0];
 
   const onClickCreateCategory = async () => {
-    if (!configName) {
+    openContextModalGeneric<CategoryEditModalInnerProps>({
-      return;
+      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,
@@ -48,13 +59,21 @@ export const AvailableElementTypes = ({
               ...previousConfig.categories,
               {
                 id: uuidv4(),
-          name: `Category ${previousConfig.categories.length + 1}`,
+                name: category.name,
                 position: previousConfig.categories.length,
               },
             ],
-    }));
+          })).then(() => {
-
             closeModal(modalId);
+            showNotification({
+              title: 'Category created',
+              message: `The category ${category.name} has been created`,
+              color: 'teal',
+            });
+          });
+        },
+      },
+    });
   };
 
   return (

src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx

@@ -36,7 +36,7 @@ export const CategoryEditModal = ({
 
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
-      <TextInput data-autoFocus {...form.getInputProps('name')} label="Name of category" />
+      <TextInput data-autoFocus {...form.getInputProps('name')} autoFocus />
 
       <Group mt="md" grow>
         <Button onClick={() => context.closeModal(id)} variant="filled" color="gray">

src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx

@@ -210,6 +210,7 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
   const edit = async () => {
     openContextModalGeneric<CategoryEditModalInnerProps>({
       modal: 'categoryEditModal',
+      withCloseButton: false,
       innerProps: {
         category,
         onSuccess: async (category) => {

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

@@ -59,7 +59,6 @@ export const ToggleEditModeAction = () => {
   );
 
   return (
-    <Tooltip label={t('tooltip')} withinPortal>
     <Popover
       opened={enabled && !smallerThanSm && !popoverManuallyHidden}
       width={250}
@@ -67,6 +66,7 @@ export const ToggleEditModeAction = () => {
       withArrow
     >
       <Popover.Target>
+        <Tooltip label={t('tooltip')} withinPortal>
           {smallerThanSm ? (
             enabled ? (
               <Group style={{ flexWrap: 'nowrap' }}>
@@ -84,6 +84,7 @@ export const ToggleEditModeAction = () => {
           ) : (
             <ToggleButtonDesktop />
           )}
+        </Tooltip>
       </Popover.Target>
 
       <Popover.Dropdown p={4} px={6}>
@@ -100,6 +101,5 @@ export const ToggleEditModeAction = () => {
         </Text>
       </Popover.Dropdown>
     </Popover>
-    </Tooltip>
   );
 };

src/components/layout/header/SettingsMenu.tsx

@@ -13,7 +13,6 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
 
   return (
     <>
-      <Tooltip label="Open Menu">
       <Menu width={250}>
         <Menu.Target>
           <ActionIcon variant="default" radius="md" size="xl" color="blue">
@@ -41,7 +40,6 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
           </Menu.Item>
         </Menu.Dropdown>
       </Menu>
-      </Tooltip>
       <SettingsDrawer
         opened={drawerOpened}
         closeDrawer={drawer.close}