Update default config

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

@@ -6,6 +6,7 @@ import {
   IconRowInsertTop,
   IconRowInsertBottom,
   IconEdit,
+  IconTrash,
 } from '@tabler/icons';
 import { useConfigContext } from '../../../../config/provider';
 import { CategoryType } from '../../../../types/category';
@@ -17,11 +18,11 @@ interface CategoryEditMenuProps {
 
 export const CategoryEditMenu = ({ category }: CategoryEditMenuProps) => {
   const { name: configName } = useConfigContext();
-  const { addCategoryAbove, addCategoryBelow, moveCategoryUp, moveCategoryDown, edit } =
+  const { addCategoryAbove, addCategoryBelow, moveCategoryUp, moveCategoryDown, edit, remove } =
     useCategoryActions(configName, category);
 
   return (
-    <Menu withinPortal>
+    <Menu withinPortal position="left-start" withArrow>
       <Menu.Target>
         <ActionIcon>
           <IconDots />
@@ -31,6 +32,9 @@ export const CategoryEditMenu = ({ category }: CategoryEditMenuProps) => {
         <Menu.Item icon={<IconEdit size={20} />} onClick={edit}>
           Edit
         </Menu.Item>
+        <Menu.Item icon={<IconTrash size={20} />} onClick={remove}>
+          Remove
+        </Menu.Item>
         <Menu.Label>Change positon</Menu.Label>
         <Menu.Item icon={<IconTransitionTop size={20} />} onClick={moveCategoryUp}>
           Move up

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

@@ -39,7 +39,7 @@ export const CategoryEditModal = ({
       <TextInput data-autoFocus {...form.getInputProps('name')} label="Name of category" />
 
       <Group mt="md" grow>
-        <Button onClick={() => context.closeModal(id)} variant="light" color="gray">
+        <Button onClick={() => context.closeModal(id)} variant="filled" color="gray">
           {t('cancel')}
         </Button>
         <Button type="submit">{t('save')}</Button>

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

@@ -176,6 +176,37 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
     );
   };
 
+  // Removes the current category
+  const remove = () => {
+    if (!configName) return;
+    updateConfig(
+      configName,
+      (previous) => {
+        const currentItem = previous.categories.find((x) => x.id === category.id);
+        if (!currentItem) return previous;
+        // Find the main wrapper
+        const mainWrapper = previous.wrappers.find((x) => x.position === 1);
+
+        // Check that the app has an area.type or "category" and that the area.id is the current category
+        const appsToMove = previous.apps.filter(
+          (x) => x.area && x.area.type === 'category' && x.area.properties.id === currentItem.id
+        );
+        appsToMove.forEach((x) => {
+          // eslint-disable-next-line no-param-reassign
+          x.area = { type: 'wrapper', properties: { id: mainWrapper?.id ?? 'default' } };
+        });
+
+        return {
+          ...previous,
+          apps: previous.apps,
+          categories: previous.categories.filter((x) => x.id !== category.id),
+          wrappers: previous.wrappers.filter((x) => x.position !== currentItem.position),
+        };
+      },
+      true
+    );
+  };
+
   const edit = async () => {
     openContextModalGeneric<CategoryEditModalInnerProps>({
       modal: 'categoryEditModal',
@@ -201,6 +232,7 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
     addCategoryBelow,
     moveCategoryUp,
     moveCategoryDown,
+    remove,
     edit,
   };
 };