diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx index da5dfd738..8e46d0f51 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx @@ -23,7 +23,6 @@ export const AppearanceTab = ({ } label={t('appearance.icon.label')} diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx index d1c8ed6de..8a39ed21d 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx +++ b/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({ 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 ( diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx index 1738568c9..3fb523569 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx +++ b/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({ + 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 ( diff --git a/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx b/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx index 18a2b6d19..0c23d45a6 100644 --- a/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx +++ b/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx @@ -36,7 +36,7 @@ export const CategoryEditModal = ({ return (
- +